React-redux的使用

React-redux是一个第三方模块，它可以帮我们在react中更方便的使用redux,使用React-redux需要先安装 。npm install react-redux --save

正常情况下使用store的步骤

1. 创建store

import {createStore} from 'redux';
import reducer from './reducer';

const store = createStore(reducer);

export default store;

2. 创建reducer

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

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

3. 组件使用store

   
   image.png

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

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

React-redux 如何被使用呢？

1. 在index.js里 渲染Provider组件。

import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';
import {Provider} from 'react-redux';
import store from './store';


// Provider 是react-redux提供的第一个核心API
// 意思是 Provider这个提供器，连接了store,
// 那么Provider组件里的所有组件都有能力获取store里的内容了
// 所以Provider组件的作用帮我们就是把store提供给每个内部的组件。每个内部组件都可以使用store
// 但是光提供还不行，如果组件想要真的与store做连接，还需要通过connect方法去做连接
// connect方法 接收3个参数，前两个参数是连接的规则，第三个是哪个组件与store做连接。
// 首先是要把store里的数据和组件里数据的关系，在mapStateToProps里列清楚
// 其次，mapDispatchToProps是要把组件props如何对store里的数据做修改和store里的dispatch方法做关联。
const App = (
  <Provider store={store}>
    <TodoList />                    
  </Provider>
)

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

2. 在Provider组件包裹的组件里，调用connect方法

    render(){
        return (
            <div>
                <div>
                    <input 
                        value={this.props.inputValue}
                        onChange = {this.props.changeInputValue}
                    />
                    <button>提交</button>
                </div>
                <ul>
                    <li>书法</li>
                </ul>
            </div>
        )
    }

// mapStateToProps的意思是，把store里的数据，映射给组件,变成组件的props
// 参数里的state就是store里的数据
const mapStateToProps = (state) => {
    // 把store里的inputValue，映射到props的inputValue
    return {
        inputValue:state.inputValue
    }
}

// mapDispatchToProps的意思是，把store.dispatch方法映射到Props上
// 参数里的dispatch方法就是store的dispatch方法
const mapDispatchToProps = (dispatch) => {
    return {
        changeInputValue(e){
            const action = {
                type: 'change_input_value',
                value:e.target.value
            }
            dispatch(action);
        }
    }
}


// connect 是react-redux提供的第二个核心API
// connect 方法的意思是做连接，这里的意思是让TodoList组件和store做连接
// 到底能不能连接，要看这个组件，是不是在Provider组件里
// TodoList组件和store的连接，符合两个映射关系。
// 第一个映射关系是把store里的数据，映射给组件,变成组件的props
// 第二个映射关系是把store的dispatch方法挂载倒Props上
// 让TodoList组件和store做连接的规则在哪里呢，在mapStateToProps里
export default connect(mapStateToProps,mapDispatchToProps)(TodoList);