redux基本概念:redux初体验(问题记录)_FF_XM的博客-CSDN博客
react-redux封装redux: react-redux抽离redux_FF_XM的博客-CSDN博客
为什么用redux-thunk?
redux无法进行异步操作,需要借助中间件(redux-thunk)来完成异步。
下载包 npm install --save redux-thunk
接上篇react-redux的使用
// 引入应用中间件函数applyMiddleware import { configureStore, applyMiddleware } from '@reduxjs/toolkit' import thunk from "redux-thunk"; import { counter } from './reducers' // 根据counter函数创建store对象 const store = configureStore( { reducer: counter }, // 异步处理中间件 applyMiddleware(thunk) ) export default store
// action.js import { INCREMENT, DECREMENT } from "./action-types"; export const increment = (number) => ({ type: INCREMENT, data: number }) export const decrement = (number) => ({ type: DECREMENT, data: number }) // 新增异步方法 export const incrementAsync = (number) => { return dispatchEvent => ( setTimeout(() => { dispatchEvent(increment(number)) }, 1000) ) }
// app.js import { connect } from "react-redux"; // 引入action内的方法 import { increment, decrement, incrementAsync } from "../redux/actions"; // 引入容器组件 import counter from "../components/counter"; export default connect( (state) => { // 将state状态传给counter组件 return { count: state }; }, // 将异步方法incrementAsync传给counter组件 { increment, decrement, incrementAsync } )(counter);
counter组件内引入异步方法
完工~
redux-devtool插件使用
插件链接:百度网盘 请输入提取码 提取码:kdmc
拖入谷歌扩展程序内
下载工具依赖包
npm install --save-dev redux-devtools-extension
// store.js import { configureStore, applyMiddleware } from '@reduxjs/toolkit' import thunk from "redux-thunk"; // redux-devtool引入插件 import { composeWithDevTools } from "redux-devtools-extension"; import { counter } from './reducers' // 根据counter函数创建store对象 const store = configureStore( { reducer: counter }, // 处理中间件 composeWithDevTools(applyMiddleware(thunk)) ) export default store
重启项目后,即可成功