# reduxjs-toolkit

**Repository Path**: duans/reduxjs-toolkit

## Basic Information

- **Project Name**: reduxjs-toolkit
- **Description**: @reduxjs/toolkit 工具库的使用介绍
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-03-24
- **Last Updated**: 2023-06-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# @reduxjs/toolkit使用介绍

> @reduxjs/toolkit是一个操作redux状态管理工具的工具库, 目的是简化开发者操作redux状态管理工具的代码, 让redux使用起来更方便一些.
> @reduxjs/toolkit中内置了redux, redux-thunk(异步中间件), reselect, redux-devtools-extension调试工具, 所以这些依赖无需安装, 因为它们已经作为@reduxjs/toolkit的依赖项,在安装@reduxjs/toolkit的时候已经安装过了


## 安装
> 无需在项目中单独安装redux, redux-thunk, reselect, 因为@reduxjs/toolkit中已经包含了这些依赖项
```jsx
npm i @reduxjs/toolkit
```

## @reduxjs/toolkit核心方法


### sliceStore
- 作用: 按照分片(分组)方式创建reducer函数
- 语法: 
> /store/newsSlice.js
```jsx
    import {sliceStore} from '@reduxjs/toolkit';

    const newsSlice=sliceStore({
        // 分片名称
        name:'cart',
        // 状态数据初始值
        initialState:{
            newsList:[]
        },
        // reducer函数内部`case`分支, 每一个case单独声明一个方法即可
        reducers:{
            // 初始化新闻列表
            // state: 系统参数, 状态数据对象
            // payload: 额外参数(数据载荷)
            newsListInit(state,payload){
                // 该方法内部允许直接修改state
                state.newsList=payload;
            }
        }
    });
    // 导出对应的actionCreators
    export const { newsListInit }=newsSlice.actions;
    // 导出reducer函数
    export default newsSlice.reducer;
```

### configStore
- 作用: 创建redux数据存储对象
- 用法:
```jsx
    import {configStore} from '@reduxjs/toolkit';
    // 导入分片reducer函数
    import newsReducer from './store/newsSlice';
    // 导入redux-logger中间件
    import logger from 'redux-logger';

    const store=configStore({
        // 注册reducer函数
        reducer:{
            news:newsReducer
        },
        // 注册redux中间件, 比如redux-loggerr
        middleware:[logger]
    });
    // 导出redux数据存储对象
    export default store;
```

### createAction
- 作用: 创建`actionCreator`
- 语法:
```jsx
import {createAction} from '@reduxjs/toolkit';
// 创建actionCreator方法
// 其返回值为: {type:'counter/increment',payload}
const increment = createAction('counter/increment');
const decrement = createAction('counter/decrement');
// 其执行结果为 {type:'counter/increment',payload:10}
const action=increment(10);
```

### createReducer
- 作用: 创建reducer函数
- 用法:
```jsx
import { createAction, createReducer } from '@reduxjs/toolkit'
// 创建actionCreator方法, 转换为字符串的结果为传入参数,即actionType
const increment = createAction('counter/increment')
const decrement = createAction('counter/decrement')
// 0: 表示状态数据初始值
// builder: 是系统在createReducer中自动注入的一个参数, 该参数对象中包含了一个方法addCase, 可以实现向reducer函数中添加case分支
const counterReducer = createReducer(0, (builder) => {
  // 当组件中通过dispatch触发了increment, 则会执行如下代码  
  builder.addCase(increment, (state, action) => state + action.payload)
  // 当组件中通过dispatch触发了decrement, 则会执行如下代码  
  builder.addCase(decrement, (state, action) => state - action.payload)
})
```

### useStore
- 作用: 在函数组件中获取redux数据存储对象store
- 语法:
```jsx
import {useStore} from '@reduxjs/toolkit';

function FunComponent(){
    // 获取redux数据存储对象
    const store=useStore();
    return <>
        <h1>函数组件</h1>
    </>
}
```

### useDispatch
- 作用: 在函数组件中获取dipatch方法(用于发送action给reducer函数)
- 语法:
> /components/News.jsx
```jsx
    // 一般在函数组件中使用
    import {useDispatch} from '@reduxjs/toolkit';

    import {newsListInit} from '../store/newsSlice';

    export default function NewsComponent(){
        // 获取dispatch方法
        const dispatch=useDispatch();
        // 初始数据
        const newsList=[
            {
                id:1,title:'娱乐新闻',content:'娱乐新闻...'
            },
            {
                id:2,title:'财经新闻',content:'财经新闻...'
            },
            {
                id:3,title:'军事新闻',content:'军事新闻...'
            },
        ]

        useEffect(()=>{
            // 初始化新闻列表
            dispatch(newsListInit(newsList))
        },[]);

        return <>
            <h1>新闻管理</h1>
        </>
    }
```
### useSelector
- 作用: 在函数组件中获取redux数据存储对象中的某个数据
- 语法:
```jsx
import {useSelector} from '@reduxjs/toolkit';
function News(){
    // 获取新闻列表
    // state: 系统参数, 表示redux数据存储对象中的顶级对象
    const  newsList=useSelector(state=>state.news.newsList);
    return <>
        <h1>新闻管理</h1>
    </>
}
```

### createAsyncThunk
- 作用: 发送异步数据请求
- 用法:
```jsx
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
// 提前封装的数据请求方法
import { fetchNewsList } from '../request';
// 创建异步actionCreator， 最终会变成一个action对象{type:'操作类型',payload:'异步请求到的数据'}，传递到reducer函数的内部， 实现state的更新
const getNewsList = createAsyncThunk( 'getNewsList',     // action中的type, 操作类型
    async () => {
        // 调用请求数据的方法
        const res = await fetchNewsList();
        // 数据请求结果返回, 相当于action中的payload，数据荷载
        return res.data;
    }
)

const newsSlice = createSlice({
    name: "news",
    initialState: {
        // 新闻列表
        newsList: []
    },
    // 同步actionCreator
    reducers: {

    },
    // 给reducer函数添加一个特殊的case分支: 该case分支的执行时间是当异步actionCreator方法执行完成的时候
    extraReducers: (builder) => {
        // getNewsList: 异步actionCreator方法名(将来需要在组件中通过dispatch来执行), fulfille表示请求执行成功
        // getNewsList.fulfilled: 表示actionType操作类型
        // state: 系统参数, 表示状态数据对象
        // action: 当前dispatch的数据操作对象action, 其中payload所携带的数据就是通过异步请求获取的的数据
        builder.addCase(getNewsList.fulfilled, (state, action) => {
            console.log(action);
            state.newsList = action.payload;
        });
    }
});
export const { getDataList } = newsSlice.actions;
export { getNewsList };
export default newsSlice.reducer;
```