redux相关中间件react-redux

react-redux中间件

react-redux介绍及作用

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

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
            })
        }
    }
}
我来评几句
登录后评论

已发表评论数()

相关站点

热门文章