React如何创建store
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;选择合适的方法
- Redux：适合大型应用，需要严格的单向数据流和中间件支持。
- Context API：适合中小型应用，无需额外依赖。
- MobX：适合需要响应式和更灵活状态管理的应用。
每种方法都有其适用场景，根据项目需求选择最合适的方案。
