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;创建root reducer（如reducers/index.js）：
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 };在应用中使用：
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>
));选择适合的方案
Redux适合大型应用需要严格状态管理的情况，Context API适合中小型应用，MobX适合需要响应式编程的场景。根据项目需求选择最合适的方案。
