redux-toolkit的使用练习

练习版

这个是文件的练习目录结构

创建不含异步的同步修改store模块counterStore.js，initialState中的是数据，reducers中的是方法，方法里传的state是initialState中的数据，action是方法外部传入的参数

创建异步的异步修改的store模块channelStore.js，异步请求部分是dispatch action 更新store数据

1、创建写法保持不变，配置好同步修改状态的方法

2、单独封装一个函数，在函数内部return一个新函数，在新函数中（1）封装异步请求获取数据 （2）调用同步的actionCreater传入异步数据生成一个action对象，并使用dispatch提交

3、组件中dispatch的写法保持不变

异步请求的方法也要导出，同步修改状态的方法可不导出

 这个是store中index.js文件，reducer中是各子模块，最后默认导出store

 

这个是根文件index.js内的写法，引入store，按需引入react-redux中的provider，使用<Provider  store={store}></Provider>包裹<App/>

 

例如在app.js（不仅仅app.js）中使用 ,先导入异步操作的文件channelStore.js中的方法，通过useEffect触发异步执行

useDispatch作用：共享状态，返回Redux的store中对dispatch的引用，可执行redux中的方法

const dispatch=useDispatch()