18.React-Redux的使用19-05-30

1.安装react-redux
yarn add react-redux
2.创建TodoList.js

import Reac, { Component } from 'react' ;
class  TodoList extends Component{
render() {
        return (
           <div>
        <div>
          <input />
          <button>提交</button>
        </div>
        <ul>
          <li>Dell</li>
        </ul>
      </div>
     )
   } }
export default TodoList;

3.创建store文件夹及index.js文件

import { createStore} from 'redux';
const store = createStore();
export default store;

4.创建reducer并在store中引入reducer
import reducer from './reducer'
reducer.js

const defaultState = {
  inputValue:'',
  list:[]
}
export default (state = defaultState, action) => {
    return state;
}

5.使用store里的数据
之前我们会在TodoList中引入store，并使用constructor获取store里的数据，如下

constructor(props) {
    super(props);
    this.state = store.getState();
}

<input value={this.state.inputValue} />

现在用react-redux写

到项目的index.js中使用Provider

import { Proviter } from 'react-redux' ;
import store from './store';

//定义一个App的组件
const App = （
//Proviter是react-redux提供的一个核心API
     <Provider store={store}>//Proviter提供器连接了store，那么Proviter里的所有组件都有能力获取store的内容了，所以TodoList就有能力获取store的内容了
          <TodoList />
     </Provider>
）;

ReactDOM.render(APP, document.getElementById('root'));

6.到TodoList组件中使用react-redux里的connect方法获取store里的数据
import { connect }from 'react-redux' ;
让TodoList组件和store进行连接
export default connect (null, null)(TodoList) ;
从而衍生出连接方式如下

const mapStateToProps = (state) => {
    return {
       inputValue: state.inputValue //state里面的inputValue会映射到组件的props的inputValue里面去
   }
}
//让TodoList和store做连接，做连接就有规则，规则在mapStateToProps里
export default connect (mapStateToProps, null)(TodoList) ;

这时可以改写为<input value={this.props.inputValue} />
现在改input添加一个onChange方法

//把store的dispatch方法挂载到props上
const mapDispatchToProps = (dispatch) => {
     return {
}
}
export default connect(mapStateToProps,mapDispatchToProps)(Todolist);

所以就可以用this.props去掉用dispatch方法

<input
            value={this.props.inputValue}
            onChange={this.props.changeInputValue}
          />

changeInputValue函数指的就是mapStateToProps里的changeInputValue方法

const mapDispatchToProps = (dispatch) => {
  return {
    changeInputValue(e){
      const action = {
        type:'change_input_value',
        value:e.target.value
      }
       dispatch(action)//dispatch把action转发给reducer
    }
  }
}

Todolist完整代码：

import React, {Component} from 'react';
import {connect} from 'react-redux';

class  TodoList extends Component{
  render() {
    return(
      <div>
        <div>
          <input
            value={this.props.inputValue}
            onChange={this.props.changeInputValue}
          />
          <button>提交</button>
        </div>
        <ul>
          <li>Dell</li>
        </ul>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return{
    inputValue:state.inputValue
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    changeInputValue(e){
      const action = {
        type:'change_input_value',
        value:e.target.value
      }
       dispatch(action)
    }
  }
}
export default connect(mapStateToProps,mapDispatchToProps)(TodoList);

7.reducer中处理action

export default (state = defaultState, action) => {
  if (action.type === 'change_input_value'){
    const newState = JSON.parse(JSON.stringify(state));
    newState.inputValue = action.value;
    return newState;
  }