React-状态共享(下)

redux – reducer – 划分

1. 分析
   一个项目：

• banenr
• home
• mine
• login
• register
• detail
• shopcar
• 会员
• 普通用户数据

2. 解决： 希望的一个类型数据一个模块 ---- 》 reducer划分 combineReducers
3. 分析： 我们希望我们的store下面每一个文件夹就是一个 类型 的数据包
4. 解决： redux combineReducers
   每一个数据包的目录结构

• store
• home
• state.js
• type.js
• reducer.js
• actionCreator.js

我们需要一个统一的redcuer的管理者

/*
这里的reducer才是真正的统一管理者
*/
import {combineReducers} from 'redux'
import todolist from './todolist/reducer'
const reducer = combineReducers({
todolist
})
export default reducer

使用的时候
store.getState().todolist.todos

redux – react-thunk – 实现异步请求和辅助发送action

1. 问题： 我们在更新视图时，在组件中每次都要进行 store 的订阅，代码是冗余的
2. 问题： 我们在触发actionCreators中的方法时，触发形式的书写也很相似
3. 问题： 后端数据交互往哪里写？ actionCreators中写，actionCreators不是用来创建动作的么?
   所以，我们引入了 react-redux 工具来处理这些问题
   综上： 我们通过 几个工具来解决
   Provider bindActionCreators
   react-redux只是一个辅助工具，只是将react和redux进行更好的连接的桥梁工具

核心概念

容器组件（智能组件）、UI组件（木偶组件） 非受控组件 ref受控组件
react-redux觉得如果一个组件想要使用到store中的数据或者是actionCreator的方法，我们都应该将其变化为容器组件包裹UI组件的样子
其中，容器组件负责连接store，将状态、方法传递给UI组件，UI组件从属性上取得这些api后进行使用
而且，不需要担心是容器组件可以根据UI组件来生成

核心API

Provider 、 connect（mapStateToProps，mapDistpatchToProps）
Provider负责将store相关的api，传入到内部所有的容器组件中
connect负责根据UI组件来生成容器组件

使用方法与细节

1. 需要安装react-redux工具
2. 需要在组件的最外层套上Provider组件，并为其传入store
3. 利用connect将需要使用store相关api的组件变成容器组件嵌套UI组件的模式
   connect方法的返回值是一个函数，这个函数接收到UI组件之后会返回一个容器组件，容器内部已经嵌套了UI组件
   Provider组件会利用context上下文将自己属性中store传递给自己的子级组件，而容器组件会取得context上面的store相关的api
   我们可以在connect函数中传入mapStateToProps/mapDispatchToProps参数来掌控容器组件给UI组件传递属性的过程
   mapStateToProps的作用：
   将store中的state传递到UI组件的属性上
   值为一个函数，接收到的就是store中的state
   返回值是什么，UI组件的属性上就有什么
   并且，因为容器组件中已经做好了store.subscribe的处理，所以一旦store中的状态变化，容器组件就马上能得知，就会重新给UI组件传入新的数据
   问题： 坑 ？ 我们的store中的数据在更新， 但是里面的容器组件中的 props 不更新
   分析： 先从组件上着手，查看我们书写的代码， 发现代码没有问题的， 这个时候我们就要去查看数据来源， 而数据来源来自于 reducer , 然后输出一下数据， 发现数据渲染了三次 ， 有两次是一个组件在创建的时候， 数据从无到有， 还有一次是容器组件产生的 ， 后面我们发送我们的new_state一直在重复初始化，
   解决方案：
   let new_state = {…previousState}
   mapDispatchToProps的作用：
   可以将能使用到dispatch的一些方法传递到UI组件上
   值为一个函数，接收到的就是store中的dispatch
   返回什么，UI组件的属性上就有什么
   这个时候actionCreator就变得很纯粹，只需要创建action，dispatch action的动作可以放到mapDispatchToProps的方法中，也就说，在mapDispatchToProps给UI组件传递的函数中将actionCreator创造好的action给dispatch走
   但是这样的写法优点不舒服，因为actionCreator里有一个方法，还需要在mapDispatchToProps里再写一个方法
   所以可以利用redux中的bindActionCreators将actionCreator中的方法直接放入到UI组件中并且将其返回的action给直接dispatch走
   因为在组件中既要用到store中的状态，也要用到actionCreator的方法，导致这个组件引入了很多东西，其实我们可以将这些逻辑封装取出
   group-todolist.js:
   import actionCreator from ‘…/store/todolist/actionCreator’
   import { connect } from ‘react-redux’
   import { bindActionCreators } from ‘redux’
   let GroupTodolist = connect(state => state.todolist, dispatch => {
   return bindActionCreators(actionCreator, dispatch)
   })
   export default GroupTodolist

---

TodoContent:
import GroupTodolist from ‘…/…/modules/group-todolist’
…
export default GroupTodolist(TodoContent)

redux-thunk 工具

我们上面的使用方法很简单，也很舒服
但是有一点小问题，如果我们有了异步操作，比如我们会先执行一个ajax调用之后再去更改状态的话，这个异步动作，没有地方放了

1. 我们不能把异步动作放到组件中，因为UI组件只负责使用数据，如果有其他的异步代码，让UI组件组件不纯粹
2. 理论上来说放到actionCreator的方法中最合适，但是,因为actionCreator目前只是专注于创建action和返回action，无法放入异步操作
   所以，我们需要用到redux的中间件工具：redux-thunk、redux-promise、redux-saga…
   在这里我们研究一下redux-thunk
   它的使用方法及其简单：
3. 安装redux-thunk
4. 在创建store的时候使用中间件
   import { createStore, applyMiddleware } from ‘redux’
   import thunk from ‘redux-thunk’
   import reducer from ‘./reducer’
   const store = createStore(reducer, applyMiddleware(thunk) )
5. 这个时候，actionCreator的方法就可以返回一个能接收到dispatch的一个函数，我们可以在这个函数中进行异步操作之后，将actionCreator创建好的action给发送