redux toolkit简单入门示例：reduxjs/toolkit包的简单使用

谁践踏了优雅 2023-10-02 20:16 18阅读 0赞

## 1.创建counterSlice ##

### features/counter/counterSlice.js ###

import {
         createSlice } from '@reduxjs/toolkit'
    import type {
         PayloadAction } from '@reduxjs/toolkit'
    
    export interface CounterState {
        
      value: number
    }
    
    const initialState: CounterState = {
        
      value: 0,
    }
    
    export const counterSlice = createSlice({
        
      name: 'counter',
      initialState,
      reducers: {
        
        increment: (state) => {
        
          // Redux Toolkit allows us to write "mutating" logic in reducers. It
          // doesn't actually mutate the state because it uses the Immer library,
          // which detects changes to a "draft state" and produces a brand new
          // immutable state based off those changes
          state.value += 1
        },
        decrement: (state) => {
        
          state.value -= 1
        },
        incrementByAmount: (state, action: PayloadAction<number>) => {
        
          state.value += action.payload
        },
      },
    })
    
    // Action creators are generated for each case reducer function
    export const {
         increment, decrement, incrementByAmount } = counterSlice.actions
    
    export default counterSlice.reducer

## 2.store中引入counterSlice ##

### app/store.js ###

import {
         configureStore } from '@reduxjs/toolkit'
    import counterReducer from '../features/counter/counterSlice'
    
    export const store = configureStore({
        
      reducer: {
        
          counter: counterReducer,
      },
    })
    
    // Infer the `RootState` and `AppDispatch` types from the store itself
    export type RootState = ReturnType<typeof store.getState>
    // Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
    export type AppDispatch = typeof store.dispatch

## 3.使用store ##

### index.js ###

import React from 'react'
    import ReactDOM from 'react-dom'
    import './index.css'
    import App from './App'
    import {
         store } from './app/store'
    import {
         Provider } from 'react-redux'
    
    ReactDOM.render(
      <Provider store={
        store}>
        <App />
      </Provider>,
      document.getElementById('root')
    )

参考链接:

[https://redux-toolkit.js.org/tutorials/quick-start][https_redux-toolkit.js.org_tutorials_quick-start]

[https_redux-toolkit.js.org_tutorials_quick-start]: https://redux-toolkit.js.org/tutorials/quick-start