标签：reduxjs react counterSlice 使用 import redux store

　　使用react-redux能让我们组件之间互相通信，并且相比较以前的写法，更加的简单明了。在使用前，我们需要npm install一下react-redux以及reduxjs/toolkit。

一、添加react-redux和reduxjs/toolkit

npm install react-redux

注意：如果找不到模块，再执行npm install @types/react-redux一下即可

　　详细内容可参考https://github.com/reduxjs/react-redux

 npm install @reduxjs/toolkit

　　详细内容可参考https://www.npmjs.com/package/@reduxjs/toolkit

二、了解react-redux和reduxjs/toolkit的几个API

　　Provider：react-redux 提供Provider组件，可以让容器组件拿到state。

　　store ：作为一个 prop 传给 Provider 组件。

　　useSelector：从redux的store对象中获取数据（state）。

 使用方法：const result:any= useSelector(selector:Function,equalityFn?:Function)

　　useDispatch：返回redux store中对dispatch函数的引用。

 使用方法：const dispatch = useDispatch()    dispatch(方法)   

　　configureStore（）：包装createStore以提供简化的配置选项和良好的默认值。它可以自动组合您的碎片，添加您提供的任何Redux中间件，默认情况下包括Redux -thunk，并支持使用Redux DevTools扩展。

三、开始撸redux的demo

　　1、创建store

　　首先在src文件夹下创建store文件夹，并创建index.ts文件。因为reduxjs/toolkit是碎片化，所以需要使用configureStore将碎片组合起来，以便维护。在index文件中的代码如下：

　import { configureStore } from '@reduxjs/toolkit';
　export default configureStore({
    reducer: {
  　 },
  });

　　2、引入Provider，将store作为props传递给子组件

　　import { Provider } from 'react-redux'
　　import store from '@src/store'
　　ReactDOM.render(
  　　<Provider store={store}>
    　　<ConfigProvider locale={zh_CN}>
      　　<Route />
    　　</ConfigProvider >
  　　</Provider>,
  　　document.getElementById('root')
　　);

　　3、经典的计数器Demo

　　需求：数字的默认值为0，点击加1按钮，数字加1，减1按钮，数字减1。

　　首先，在store文件夹下创建一个counterSlice文件，并引入createSlice。

import { createSlice } from '@reduxjs/toolkit'

　　然后创建一个counterSlice碎片

export const counterSlice = createSlice({
  name: 'counter',　　　　　　　　　 //碎片名称
  initialState: {　　　　 　　　　　 //碎片的默认值
    value: 0,
  },
  reducers: {　　　　　　　　　　　　 //方法
    increment: (state) => {　　　　//增加1函数
      state.value += 1;
    },
    decrement: (state) => {　　　　//减少1函数
      state.value -= 1;
    },
  },
});

　　最后将increment，decrement添加到action，并且声明一个变量selectCount，导出这个碎片。

  export const { increment, decrement } = counterSlice.actions;
  export const selectCount = (state: any) => state.counter.value;
  export default counterSlice.reducer;

　　注：将increment，decrement添加到action，外部可直接调用，并且会自动触发reducers，并且返回最新的state。

　　创建counterSlice碎片后，需要在store的index文件中，将这个碎片组合起来。

  import { configureStore } from '@reduxjs/toolkit';
  import counterSlice from './counterSlice'
  export default configureStore({
    reducer: {
      counter: counterSlice　　　　　　//碎片的name：碎片
    },
  });

 　　如何在我们需要的地方使用呢？这种情况下就需要使用useSelector和useDispatch了。完整的代码以及注释如下：

import React from 'react';
import { useSelector, useDispatch } from 'react-redux'; 　　　　　　　　　　　　//引入useSelector以及useDispatch
import { selectCount, increment, decrement } from '@src/store/counterSlice';　　　　//引入counterSlice碎片中的变量以及函数
import { Button } from 'antd'
export default () => {
  const count = useSelector(selectCount);         //获取count的值，会随着按钮的点击而改变
  const dispatch = useDispatch()　　　　　　　　　　　
  return (
    <div>
      <p>count的值是{count}</p>　　　　　　　　
      <Button onClick={() => dispatch(increment())}>加1</Button>　　　　　　//点击加1按钮时，触发increment　　
      <Button onClick={() => dispatch(decrement())}>减1</Button>　　　　　　//点击减1按钮时，触发decrement
    </div>
  );
}

　　到这，简单的一个demo就完成了。

标签：reduxjs,react,counterSlice,使用,import,redux,store
来源： https://www.cnblogs.com/minorf/p/12925054.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。