当前位置：首页 > React

React如何创建store

2026-02-12 03:35:33React

React 中创建 Store 的方法

在 React 中创建 store 通常涉及使用状态管理库，如 Redux、MobX 或 Context API。以下是几种常见方法：

使用 Redux 创建 Store

安装 Redux 和相关依赖：

npm install redux react-redux

创建 store 文件（如 store.js）：

import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

export default store;

定义 reducer（如 reducers/index.js）：

const initialState = {
  count: 0
};

const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

export default rootReducer;

在 React 应用中提供 store：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

使用 Context API 创建 Store

创建 context 和 provider（如 StoreContext.js）：

import React, { createContext, useState } from 'react';

export const StoreContext = createContext();

export const StoreProvider = ({ children }) => {
  const [count, setCount] = useState(0);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return (
    <StoreContext.Provider value={{ count, increment, decrement }}>
      {children}
    </StoreContext.Provider>
  );
};

在应用中使用 provider：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { StoreProvider } from './StoreContext';

ReactDOM.render(
  <StoreProvider>
    <App />
  </StoreProvider>,
  document.getElementById('root')
);

使用 MobX 创建 Store

安装 MobX 和相关依赖：

npm install mobx mobx-react-lite

创建 store 文件（如 counterStore.js）：

import { makeAutoObservable } from 'mobx';

class CounterStore {
  count = 0;

  constructor() {
    makeAutoObservable(this);
  }

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }
}

export default new CounterStore();

在 React 组件中使用：

import React from 'react';
import { observer } from 'mobx-react-lite';
import counterStore from './counterStore';

const App = observer(() => {
  return (
    <div>
      <button onClick={() => counterStore.decrement()}>-</button>
      <span>{counterStore.count}</span>
      <button onClick={() => counterStore.increment()}>+</button>
    </div>
  );
});

export default App;