@reduxjs/toolkit 基本使用

安装依赖

pnpm i @reduxjs/toolkit react-redux

使用

下面以TodoList为例，话不多说，直接上代码，跟着下面的步骤来就行了。

提示，阅读以下代码，需要了解TypeScript的一些基本知识。

1. store/reducers/todolist.ts

   import { createSlice, PayloadAction } from '@reduxjs/toolkit'
   
   type TodoListInitialState = {
     list: string[]
   }
   type AddItemPayload = string
   type RemoveItemPayload = number
   const initialState: TodoListInitialState = {
     list: []
   }
   const todolistSlice = createSlice({
     name: 'todolist',
     initialState,
     reducers: {
       addItem(state, action: PayloadAction<AddItemPayload>) {
         state.list.push(action.payload)
       },
       removeItem(state, action: PayloadAction<RemoveItemPayload>) {
         state.list.splice(action.payload, 1)
       }
     }
   })
   export const { addItem, removeItem } = todolistSlice.actions
   
   export default todolistSlice.reducer
   
   

2. store/reducers/root.ts

   import { combineReducers } from '@reduxjs/toolkit'
   import todolist from './todolist'
   
   const rootReducer = combineReducers({
     todolist
   })
   
   export default rootReducer
   

3. store/index.ts

   import { configureStore } from '@reduxjs/toolkit'
   import { useDispatch, useSelector } from 'react-redux'
   import rootReducer from './reducers/root'
   
   const store = configureStore({
     reducer: rootReducer
   })
   
   type AppState = ReturnType<typeof rootReducer>
   type AppDispatch = typeof store.dispatch
   
   export const useAppDispatch = () => useDispatch<AppDispatch>()
   export const useAppState = <T extends (state: AppState) => any>(selector: T): ReturnType<T> =>
     useSelector(selector)
   
   export default store
   
   

4. main.tsx

   import React from 'react'
   import ReactDOM from 'react-dom/client'
   import App from './App.tsx'
   import './style/index.less'
   import store from './store'
   import { Provider } from 'react-redux'
   ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
       <Provider store={store}>
         <App />
       </Provider>
     </React.StrictMode>
   )
   
   

5. component/TodoList/index.tsx

   import { useState } from 'react'
   import { useAppDispatch, useAppState } from '../../store/index'
   import { addItem, removeItem } from '../../store/reducers/todolist'
   function TodoList() {
     const dispatch = useAppDispatch()
     const { list } = useAppState(state => state.todolist)
     const [val, setVal] = useState('')
     const onAdd = () => {
       dispatch(addItem(val))
       setVal('')
     }
     const onRemove = (index: number) => {
       dispatch(removeItem(index))
     }
     return (
       <div>
         <input
           value={val}
           onChange={e => {
             setVal(e.target.value)
           }}
         />
         <button onClick={onAdd}>+</button>
         <ul>
           {list.map((item, index) => (
             <li key={index}>
               <span>{item}</span>
               <button
                 onClick={() => {
                   onRemove(index)
                 }}
               >
                 -
               </button>
             </li>
           ))}
         </ul>
       </div>
     )
   }
   
   export default TodoList