在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使用就行
?
?
?
?
?
?
?
?
?