redux相关中间件react-redux

react-redux中间件

react-redux介绍及作用

React-Redux是Redux的官方React绑定库。它能够使你的React组件从Redux store中读取数据，并且向store分发action以更新数据

react-redux的工作思想

react-redux把store直接集成到React应用的顶层props里面，各个子组件能访问到顶层props就行了即可拿到store中的数据

使用流程

• 下载 npm i react-redux redux -S
• 封装store index.js->创建共享数据对象srore reducer.js->处理数据
• 在根组件中从react-redux引入Provider组件
• 根组件引入store共享数据对象
• 在Provider组件上设置store={store->共享的数据对象}

    // 引入store   index.js/reducer.js
    import store from './store/index.js'
    // 引入Provider
    import {Provider} from 'react-redux'
    return (
        <Provider store={store}>
        <div className="App">~~~~
        </div>
        </Provider>
    );

• 在需要共享数据的组件中引入 connect方法连接共享数据对象和组件

    import {connect} from 'react-redux'
    export default connect(
        mapState,           // state 参数一
        mapDispatch   // dispatch 参数二
    )(Todolist)  // 组件

• connect(参数->参数有4个，皆为可选参数)(组件)
• connect参数1 参考代码

    const mapState = state=>{   // store获取的数据
        console.log(state);
        return state
    }

• connect参数2 参考代码

   const mapDispatch=dispatch=>{   // dispatch派发告知store
    return {
        changeInput(e){
            dispatch({
                type:'change_input_value',
                value: e.target.value
            })
        }
    }
}