当前位置：首页 > React

React如何创建store

2026-02-26 13:28: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;

创建root reducer（如reducers/index.js）：

React如何创建store

import { combineReducers } from 'redux';
import counterReducer from './counterReducer';

export default combineReducers({
  counter: counterReducer
});

在应用入口文件（如index.js）中提供store：

import { Provider } from 'react-redux';
import store from './store';

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

使用Context API创建Store

创建context文件（如StoreContext.js）：

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

const initialState = {};
const store = createContext(initialState);
const { Provider } = store;

const StateProvider = ({ children }) => {
  const [state, dispatch] = useReducer((state, action) => {
    switch(action.type) {
      case 'ACTION_TYPE':
        return { ...state, ...action.payload };
      default:
        return state;
    }
  }, initialState);

  return <Provider value={{ state, dispatch }}>{children}</Provider>;
};

export { store, StateProvider };

在应用中使用：

React如何创建store

import { StateProvider } from './StoreContext';

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

使用MobX创建Store

安装MobX相关依赖：

npm install mobx mobx-react

创建store类（如CounterStore.js）：

import { observable, action } from 'mobx';

class CounterStore {
  @observable count = 0;

  @action increment() {
    this.count++;
  }

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

export default new CounterStore();

在组件中使用：

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

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