创建一个 Redux store 通常涉及以下几个步骤。Redux store 是保存应用程序所有状态的对象，改变状态的唯一方法是 dispatch action。以下是创建 Redux store 的具体步骤：
一、安装 Redux 相关库
首先，需要安装 Redux 和 react-redux（如果你是在 React 应用中使用 Redux）。你可以使用 npm 或 yarn 来安装这些库。
bash复制代码npm install redux react-redux
或者
bash复制代码yarn add redux react-redux
如果你使用的是 Redux Toolkit，它提供了一个更简化的方式来创建 store 和编写 reducers，你也可以安装它：
bash复制代码npm install @reduxjs/toolkit
或者
bash复制代码yarn add @reduxjs/toolkit
二、创建 Reducer
Reducer 是一个纯函数，它接收当前的 state 和一个 action，并返回新的 state。你需要编写一个或多个 reducer 来处理应用的不同部分的状态。
javascript复制代码// reducers.jsconst initialState = { counter: 0,}; const rootReducer = (state = initialState, action) => { switch (action.type) { case 'INCREMENT': return { ...state, counter: state.counter 1 }; case 'DECREMENT': return { ...state, counter: state.counter - 1 }; default: return state; }}; export default rootReducer;
如果你使用的是 Redux Toolkit，你可以使用 createSlice 来创建 reducer：
javascript复制代码// counterSlice.jsimport { createSlice } from '@reduxjs/toolkit'; export const counterSlice = createSlice({ name: 'counter', initialState: { value: 0, }, reducers: { increment: (state) => { state.value = 1; }, decrement: (state) => { state.value -= 1; }, },}); export const { increment, decrement } = counterSlice.actions;export default counterSlice.reducer;
三、创建 Store
使用 createStore 函数来创建 Redux store。如果你使用的是 Redux Toolkit，则使用 configureStore。
不使用 Redux Toolkit：
javascript复制代码// store.jsimport { createStore } from 'redux';import rootReducer from './reducers'; const store = createStore(rootReducer); export default store;
使用 Redux Toolkit：
javascript复制代码// store/index.jsimport { configureStore } from '@reduxjs/toolkit';import counterReducer from '../reducers/counterSlice'; export default configureStore({ reducer: { counter: counterReducer, },});
四、将 Store 集成到 React 应用中
使用 react-redux 提供的 Provider 组件将 Redux store 集成到 React 应用中。这样，你就可以在应用的任何组件中访问 Redux store 了。
javascript复制代码// index.js 或 App.jsimport React from 'react';import ReactDOM from 'react-dom/client';import './index.css';import App from './App';import { Provider } from 'react-redux';import store from './store/index'; // 根据你的文件结构调整路径 const root = ReactDOM.createRoot(document.getElementById('root'));root.render( <React.StrictMode>
Counter: {count}
<button onClick={() => dispatch(increment())}>Increment <button onClick={() => dispatch(decrement())}>Decrement
