React如何创建store
创建React中的Store
在React中创建store通常涉及使用状态管理库，如Redux、MobX或Context API。以下是几种常见方法：
使用Redux创建Store
Redux是最流行的状态管理库之一，适用于大型应用。
安装Redux和React-Redux：
npm install redux react-redux创建store的基本步骤：
import { createStore } from 'redux';
import rootReducer from './reducers';
const store = createStore(rootReducer);
export default store;rootReducer通常由多个reducer组合而成：
import { combineReducers } from 'redux';
import userReducer from './userReducer';
import productReducer from './productReducer';
const rootReducer = combineReducers({
user: userReducer,
products: productReducer
});
export default rootReducer;使用Context API创建Store
对于小型应用，React的Context API足够使用。
创建context store：
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 };使用MobX创建Store
MobX提供更简单的响应式状态管理。
安装MobX：
npm install mobx mobx-react创建MobX store：
import { makeAutoObservable } from 'mobx';
class CounterStore {
count = 0;
constructor() {
makeAutoObservable(this);
}
increment() {
this.count++;
}
decrement() {
this.count--;
}
}
export default new CounterStore();使用Redux Toolkit简化Redux
Redux Toolkit简化了Redux的样板代码。
安装Redux Toolkit：
npm install @reduxjs/toolkit创建store：
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';
const store = configureStore({
reducer: {
counter: counterReducer
}
});
export default store;创建slice：
import { createSlice } from '@reduxjs/toolkit';
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;每种方法适用于不同场景：Redux适合大型应用，Context API适合小型应用，MobX提供更简单的响应式编程，Redux Toolkit简化了Redux的使用。选择取决于项目需求和团队偏好。
