React集成redux与react-router-dom

一、添加依赖
1. yarn add redux react-redux redux-thunk react-router-dom
// redux-thunk 让action可以返回函数的中间件
2. yarn add redux-logger --dev
//辅助redux,可在打印中看到redux一切行为和数据
二、创建项目目录结构


React集成redux与react-router-dom_第1张图片
目录结构图

三、配置Redux(文件具体路径请看项目目录结构
1. actionTypes 公用属性


actionTypes公用type属性

2. 添加一个action
React集成redux与react-router-dom_第2张图片
action行为

3. 写入与action对应的reducer
React集成redux与react-router-dom_第3张图片
处理action传来的信息

4. 合并reducer ,便于处理reducer过多导致的麻烦
React集成redux与react-router-dom_第4张图片
合并Reducer

5. 配置store
React集成redux与react-router-dom_第5张图片
配置store
  1. 将store写入启动程序中


    React集成redux与react-router-dom_第6张图片
    添加store进根目录index.js中
  2. 结束
    三、配置路由


    React集成redux与react-router-dom_第7张图片
    配置路由,并且尝试使用redux

你可能感兴趣的:(React集成redux与react-router-dom)