Redux中间件redux-thunk

在redux中,action仅仅是携带了数据的普通js对象,actionCreator返回值是这个action类型的对象.

然后通过store.dispatch()进行分发,同步的情况下一切就都很完美,但是reducer无法处理异步的情况

这时候  我们就需要中间件middleware 来解决

//这里先介绍一个redux-thunk

 我们现在有这样的一个需求

cinema和search  都需要请求后台的数据  这个数据还一样

`重复请求 不太好

我们优化一下  谁先取到  就先存起来   之后 就不用再发送请求

我们定好reducer

 再定义actionCreator

actionCreator在这里是按照配定好中间件的情况下写的

这是个异步的请求  请求的结果 最终会是一个dispatch的对象    

(这里面的dispatch参数可以更改成别的名字,这样写只是为了清除 中间件到底塞到这个异步的actionCreator  中  什么东西)

我们在cinema组件页面中导入actionCreator

 然后 在组件被创建的时候  判断一下   是不是要请求数据

(如果redux的store中 这个list 没有数据   我们就将上面actionCreator的返回对象值  dispatch出去  进行 list的缓存)

之后我们在redux的store.js中配置中间件

先导入  安装好的redux-thunk的包

 使用applyMiddleware()挂载中间件

 这样就完成了   如果没有这个store.js文件中的这两个配置  上面在actionCreator和cinema组件中的配置 就执行不了  而且会报错

以上就是redux-thunk中间件的完整使用

如果我们想在 cinema组件中 使用我们的redux的store中的数据  (在函数式组件中)

 使用useState

 并在useEffect中订阅 并 设置状态

记着在cinema组件销毁的  取消订阅  以避免重复订阅  都是在useEffect中完成

直接jsx使用就行