react+redux+react-redux练习项目

一，项目目录

二、1、新建pages包，在pages中新建TodoList.js；

       2、新建store包，在store包中新建store.js,reducer.js,actionCreater.js,actionType.js；

       3、在public包中新建list.json

三、安装redux,react-redux,axios

     yarn add  redux --save， yarn add  react-redux --save，yarn add  axios --save

四、index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import { Provider } from 'react-redux'
import TodoList from './pages/TodoList'
import store from './store/store'

const App =(
    <Provider store={store}>
        <TodoList />
    </Provider>
);
ReactDOM.render(App, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

使用react-redux。在react-redux的使用中，关注两个方法：Provider和connect

• Provider把store放到context里，所有的子元素可以直接取到store（<TodoList/>和其他所有添加在<Provider></Provider>中的组件），本质上 Provider 就是给 connect 提供 store 用的。
• connect 是一个高阶组件，接受一个组件 WrappedComponent 作为参数，负责链接组件，把给到redux里的数据放到组件的属性里。主要有两个作用：1. 负责接受一个组件，把state里的一些数据放进去，返回一个组件；2. 数据变化的时候，能够通知组件

 

五、store.js

import { createStore,applyMiddleware,compose} from 'redux';
import reducer from './reducer';
import thunk from 'redux-thunk';


//添加redux工具
const composeEnhancers= window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

const enhancerss = compose(
    applyMiddleware(thunk),composeEnhancers
);
const store=createStore(reducer,enhancerss);

export default store;

引入redux-thunk中间件 他允许你的action可以返回函数和对象（不使用中间件只能返回对象）, 带有dispatch和getState两个参数, 在这个action函数里, 异步的dispatch action;

六、reducer.js

const defaultState={
inputValue:'',
    list:[]
}

export default (state=defaultState,action)=>{

    switch(action.type){
        case "change_input_value":
        {
            const newState =JSON.parse(JSON.stringify(state))
            newState.inputValue=action.value;
            return newState;
        }
        case "add_item":
        {
            const newState =JSON.parse(JSON.stringify(state))
            newState.list.push(newState.inputValue)
            return newState
        }
        case "init_list_action":
        {
            const newState=JSON.parse(JSON.stringify(state));
            newState.list=action.data;
            return newState;
        }
        case "delete_item":
        {
            const newState=JSON.parse(JSON.stringify(state));
            newState.list.splice(action.index, 1)
            return newState;
        }
        default:
        return state
    }

}

七、actionType.js

export const CHANGE_INPUT_VALUE='change_input_value'
export const ADD_ITEM='add_item'
export const INIT_LIST_ACTION='init_list_action'
export const DELETE_ITEM='delete_item'

八、actionCreater.js

import axios from 'axios'
import {CHANGE_INPUT_VALUE,ADD_ITEM,INIT_LIST_ACTION,DELETE_ITEM} from './actionType'


export const initListAction = (data)=>({
    type: INIT_LIST_ACTION,
    data
})


export const deleteItem =(value)=>({
    type:DELETE_ITEM,
    value
})
export const additem =(value)=>({
    type:ADD_ITEM,
    value
})

export const changeValue =(value)=>({
    type:CHANGE_INPUT_VALUE,
    value
})

export const getTodoList=()=>{
    return(dispatch)=>{
        axios.get('./list.json').then((res)=>{
            const data=res.data
            const action =initListAction(data)
            dispatch(action);
        })
    }
}

九、TodoList.js

import React from 'react';
import store from '../store/store'
import { connect} from 'react-redux'
import {initListAction,getTodoList,additem,changeValue,deleteItem} from '../store/actionCreater'


 class TodoList extends React.Component{
    constructor(){
        super();
        this.state=store.getState();
    }


     componentDidMount(){
       const action=getTodoList();
       store.dispatch(action);
     }
    render(){
        const {list,inputValue,changeInputValue,handleAddClick,handleDelete} = this.props
        return(
            <div>
                <div>
                    <input value={inputValue} onChange={changeInputValue}></input>
                    <button onClick={handleAddClick}>提交</button>
                </div>
                    <ul>
                        <li>
                            {
                              list &&list.map((item,index)=>{
                                    return <li onClick={()=>{handleDelete(index)}} key={index}>{item}</li>
                            })
                            }
                        </li>
                    </ul>
            </div>
        )
    }
}


const mapStateToProps =(state)=>{
    return {
        inputValue:state.inputValue,
        list:state.list
    }
}

const mapDispatchToProps =(dispatch)=>{
    return{
        changeInputValue(e){
            const action=changeValue(e.target.value)
             dispatch(action)
        },
        //新增数据
        handleAddClick(){
            const action =additem()
            dispatch(action)
        },
        //删除数据
        handleDelete(index){
          const action=deleteItem(index)
          dispatch(action)
        }
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(TodoList);//和store做连接

十、list.json

["hello","nihao","haha"]