使用React-Redux简单项目入门（七）

目录结构：

相关代码
1:index.js

import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';

//第一步
import {Provider} from 'react-redux';//引入react-redux 
import  store from './store/index';

//Provider：是一个组件，来自于react-redux中，这也是react-redux提供的第一个API
//作用：把store提供给<Provider></Provider>所有的组件实现store共享
const App=(
    {/*属性store：提供器Provider，连接了store，这样其里面的所有组件都有能力获取store里的数据*/}
    <Provider store={store}>
	{/*Provider将store提供给里面的组件了，这里面的组件都有能力获取store里的数据*/}
        <TodoList/>
        {/*<A></A>*/}
        {/*<B></B>*/}
    </Provider>
);
//
// ReactDOM.render(<TodoList />, document.getElementById('root'));
ReactDOM.render(App, document.getElementById('root'));

2:TodoList.js

import React,{Component} from  'react';
//第二步：connect:react-redux提供给我们第二个API
//Provider已经连接了store，并将store传给组件，通过这个方法在组件中，就可以获取到store了
import {connect} from 'react-redux';
class TodoList extends  Component{
     {/* 使用react-redux就不需要这样获取数据了
     constructor(props){
	super(props);
	this.state = store.getState();
     } 
     
     */}
     render(){
        return(
            <div>
                <input
                    value={this.props.inputValue}//使用store传的值
                    onChange={this.props.changeInputValue}
                />
                <button  onClick={this.props.addItem}>提交</button>
                <ul>
                    {
                        this.props.list.map((item,index)=>{
                            return <li key={index} onClick={()=>this.props.deleteItem(index)}>{item}</li>
                        })
                    }
                </ul>
            </div>
        )
    }
}
//规定映射条件
//store里的state映射到组件的props里
const mapStateToProps=(state)=>{
    return {
        inputValue:state.inputValue,//inputValue是指组件this.props.inputValue,state.inputValue是指store里的inputValue
        list:state.list,
    }
};

//把store.dispatch映射到组件的props上
const mapDispatchToProps=(dispatch)=>{
  return {
      //把这个函数映射到组件的props上
      changeInputValue(e){
           const action={//1:创建action消息
               type:'change_input_value',
               value:e.target.value,//把输入框里的值传给store
           };
           dispatch(action);//2：把这个消息传给store处理
      },
      addItem(){
          const  action={
              type:'add_item',
          };
          dispatch(action);
      },
      deleteItem(index){
          const action={
              type:'delete_item',
              index:index,
          };
          dispatch(action);
      }
  }
};

//目的：使TodoList和store做链接
//export default TodoList；未使用react-redux之前，直接导出组件

export default connect(mapStateToProps,mapDispatchToProps)(TodoList);

connect:
1）、导出connect方法，把TodoList传给connect(arr1, arr2)(TodoList)这个方法，
----作用是：做连接，将组件（TodoList）与store做连接

2）、组件在与store做连接的时候，做连接就要有一定的连接规则，这就引出第一个参数arr1： mapStateToProps

mapStateToProps就是要定义这个规则，他其实就是一个函数，并会接受一个参数state，也就是store里面的数据，同时返回一个对象出去

const mapStateToProps=(state)=>{
   return {
	inputValue:state.inputValue,
	list:state.list,
    }
};
export default connect(mapStateToProps,arr2)(TodoList);

解释以上代码：
组件TodoList与store做连接，做连接有一个规则（映射关系），规则就在mapStateToProps里面（mapStateToProps），根据这个映射关系，store里面的数据state就会映射到这个组件的props中（inputValue是指组件this.props.inputValue,state.inputValue是指store里的inputValue）在组件中通过this.props.inputValue就可以获取到公共数据中的值（reducer中定义的）

解释下mapStateToProps：
把store里面的数据state映射给组件（TodoList），变成这个组件的props

口诀：
connect是连接；
谁和谁连接？组件和store进行连接；
怎么做连接？有一个映射关系，在mapStateToProps中
怎么映射呢？store里面的数据state映射到组件的props中
使用时，通过this.props.inputValue就可以获取到公共数据中的值了

修改store中的数据：
组件和store进行关联，store中的数据映射到组件的props上，如果我现在要对store中的数据做修改，我们也可以通过store.props这种方法进行操作；
mapDispatchToProps：store.dispatch,我们把store.dispatch挂载到props中，当input的value值发生变化的时候，就要去改变store中的内容，想要改变store的内容，就要调用store.dispatch方法。store.dispatch方法被映射到了props上了，所以通过this.props.xxx去调用store.dispatch这个方法，

3:store/index.js

import {createStore} from 'redux';
import reducer from './reducer';
const store=createStore(reducer);

export  default store;

4:store/reducer.js

const defaultState={//创建一个默认state
    inputValue:'',
    list:[],
};

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

    //3：处理store自动传过来的action消息
    if(action.type==='change_input_value'){
        const newState=JSON.parse(JSON.stringify(state));//对原有数据进行深拷贝、
        newState.inputValue=action.value;
        return newState;//4:reducer把newState传给store,store进行更新处理
    }
    if (action.type==='add_item'){
        const newState=JSON.parse(JSON.stringify(state));//对原有数据进行深拷贝、
        newState.list.push(newState.inputValue);
        newState.inputValue='';
        return newState;
    }
    if (action.type==='delete_item'){
        const newState=JSON.parse(JSON.stringify(state));//对原有数据进行深拷贝、
        newState.list.splice(action.index,1);//删除从索引开始的1个
        return newState;
    }



    return state;
}