redux-toolkit常规使用

推荐的store组织结构

1. store/index.js创建store。
2. store/reducers/*创建各个模块的reducer逻辑

各个模块的state逻辑

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    count: 0,
  },
  reducers: {
    add(state, action) {
      state.count += action.payload;
    },
    sub(state, action) {
      state.count -= action.payload;
    }
  },
  extraReducers: {
    [loadMovies.fulfilled](state, action) {
      console.log('成功reducer');
    },
    [loadMovies.rejected](state, action) {
      console.log('失败reducer');
    },
    [loadMovies.pending](state, action) {
      console.log('请求中reducer');
    }
  }
})

// 创建异步action
export const loadMovies = createAsyncThunk('loadMovies', async (url) => {
  const movies = await fetch(url).then(res => {
    return res.json();
  })
  return movies;
})
export const { add, sub } = counterSlice.actions; // 同步action
export default counterSlice.reducer;

store创建逻辑

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './reducers/counterSclice';

const store = configureStore({
  reducer: {
    counterReducer
  }
})

export default store;

接入视图层

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

视图层使用

import { useDispatch, useSelector } from 'react-redux';
import { add, sub, loadMovies } from './store/reducers/counterSclice';
function App() {
  const count = useSelector(state => state.counterReducer.count);
  const dispatch = useDispatch();
  return (
    <div>
      <button onClick={() => dispatch(sub(2))}>-</button>
      {count}
      <button onClick={() => dispatch(add(2))}>+</button>
      <button onClick={() => dispatch(loadMovies(url))}>发送ajax请求</button>
    </div>
  )
}

export default App