在react中,我们可以用过props完成一些特定场景下的状态共享,比如父子组件。但是当遇到一些其他场景时,状态共享显得特别繁琐,比如常见的跨级组件,同级组件等。虽然react提供了context API 来试图解决这方面的问题,但是还是不够优雅。现在市面上有很多优秀的状态管理库,我们一起分析看看那个更适合我们。
特点:
// main.js
import store from './store';
import { Provider } from 'react-redux';
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
);
// store.js
import { applyMiddleware, legacy_createStore as createStore, compose } from 'redux';
import reducer from './reducer';
import thunk from 'redux-thunk';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, composeEnhancers(applyMiddleware(thunk)));
export default store;
// reducer.js
import { combineReducers } from "redux";
import { reducer as IndexReducer } from '@/pages/index/store';
export default combineReducers({
Index: IndexReducer,
})
特点:
// store.js
import { action, observable, makeObservable } from 'mobx';
class Store {
constructor() {
makeObservable(this, {
count: observable,
list: observable,
setCount: action,
setList: action
})
}
count = 1;
list = {};
setCount() { this.count++ };
setList(data) { this.list = data };
}
export const store = new Store();
// demo.js
import { useObserver, useLocalStore } from 'mobx-react';
import { store } from './store';
const Demo1 = () => {
const localStore = useLocalStore(() => store);
const addCount = () => {
localStore.setCount()
}
const changeList = () => {
localStore.setList({ name: 'kobe' })
}
return useObserver(() =>
count:{localStore.count}
list:{localStore.list.name}
)
}
export default Demo1;
特点:
import { atom, selector } from 'recoil';
export const countState = atom({
key: 'countState',
default: 0
})
export const dataListState = atom({
key: 'dataListState',
default: {}
})
export const dataState = selector({
key: 'dataState',
get: ({ get }) => {
const count = get(countState);
const dataList = get(dataListState);
return {
count,
dataList
}
}
})
// 消费
import { useRecoilState, useSetRecoilState,useRecoilValue,useResetRecoilState } from 'recoil';
const [count, setCount] = useRecoilState(countState); // 与useState类似,提供读写方法
const setDataList = useSetRecoilState(dataListState); // 仅修改
const { count, dataList } = useRecoilValue(dataState);// 只读
const reset = useResetRecoilState(dataState);// 重置
特点:
// store.js
import create from "zustand";
const useStore = create((set) => ({
votes: 0,
list: {},
addVotes: () => set(state => ({ votes: state.votes + 1 })),
subVotes: () => set(state => ({ votes: state.votes - 1 })),
getList: async () => {
const data = await mockData();
set({ list: data })
}
}))
export { useStore }
// demo.js
import { useStore } from './store';
import shallow from 'zustand/shallow';
const Demo1 = () => {
const { addVotes, subVotes, getList } = useStore(state => ({ addVotes: state.addVotes, subVotes: state.subVotes, getList: state.getList }), shallow);
// const subVotes = useStore(state => state.subVotes);
return
}
export default Demo1;
特点:
// app.js
import dva from 'dva';
// Initialize
const app = dva();
// Model
app.model(require('./models/example').default);
// Router
app.router(require('./router').default);
// Start
app.start('#root');
// 定义modal
import { mockData } from '../utils/mock'
export default {
namespace: 'example',
state: {
list: {}
},
reducers: {
getlist(state, { data }) {
console.log('state====', state);
return { ...state, list: data };
},
},
effects: {
*getlistAsync({ payload }, { call, put }) {
const data = yield call(mockData);
yield put({ type: 'getlist', data });
},
},
};
// 消费
import { connect } from 'dva';
import Name from './name'
function IndexPage(props) {
const { dispatch } = props
const getlist = () => {
dispatch({
type: "example/getlistAsync",
})
};
return (
);
}
const mapStateToProps = (state) => {
return {
example: state.example,
};
};
export default connect(mapStateToProps)(IndexPage);
// name 子组件
import { connect } from 'dva'
const Name = ({ list }) => {
return name:{list.name}
};
const mapStateToProps = (state) => {
return {
list: state.example.list
};
};
export default connect(mapStateToProps)(Name);
引用
Recoil
Mobx
Redux
Zustand
Dva