邂逅Redux Toolkit

最新推荐文章于 2023-08-19 20:47:18 发布

前端imber

最新推荐文章于 2023-08-19 20:47:18 发布

阅读量706

点赞数 1

分类专栏： React 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/imber___zsk/article/details/121703454

版权

React 专栏收录该内容

17 篇文章 3 订阅

订阅专栏

useSelector

//features/counter/counterSlice.js

//允许我们从状态中选择一个值
1. 
export const selectCount = (state) => state.counter.value;

//通过hook使用
2. 
import { useSelector, useDispatch } from 'react-redux';
const count = useSelector(selectCount);

useDispatch

//features/counter/counter.js
import { useSelector, useDispatch } from 'react-redux';
const dispatch = useDispatch();
//提交reducer
dispatch(increment())

//increment所在  //features/counter/counterSlice.js
export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
  extraReducers: (builder) => {
    builder
      .addCase(incrementAsync.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(incrementAsync.fulfilled, (state, action) => {
        state.status = 'idle';
        state.value += action.payload;
      });
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;//推断出counterSlice.actions上有这几个，自动挂上去的吧

createAsyncThunk

//increment所在  //features/counter/counterSlice.js
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

//处理异步
export const incrementAsync = createAsyncThunk(//完了只会到extraReducers
  'counter/fetchCount',
  async (amount) => {
    const response = await fetchCount(amount);
    return response.data;
  }
);

createSlice

//features/counter/counterSlice.js
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
  extraReducers: (builder) => {
    builder
      .addCase(incrementAsync.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(incrementAsync.fulfilled, (state, action) => {
        state.status = 'idle';
        state.value += action.payload;
      });
  },
});

configureStore

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});