经常用react的兄弟，一定知道redux-saga。redux-saga是redux的中间件，封装了很多好用的api。但是随着项目的越来越大，redux本身就显得很重了，再加上redux-saga，让项目更笨重。所以，越来越多轻量型的react状态管理工具出现了。最近，我们前端项目在推jotai，就是这样的工具。

但是，我们这些老家伙，毕竟用了不少年的redux和redux-saga，对它的api更得心应手。再加上很多旧项目都是用的redux-saga，要对它们进行改造，也是一件费时费力的事情。

因此，我对jotai 进行了二次封装，模拟redux-saga的一些常用的api。

talk is cheap,let's coding.

工具名 @rasir/jotai-redux

封装 jotai 模拟 redux-saga 的 api

安装

npm i @rasir/jotai-redux

使用方法

// APIs
import {
  select,
  useSelector,
  useUpdateStore,
  useDispatch,
  createStore,
  updateState,
  getStore,
  addStores,
  dispatch,
} from "@rasir/jotai-redux";

• 1. createStore 用于初始化 store

const store = createStore({
  states: {
    user: { id: 1, name: "rasir" },
  },
  actions: {
    user: {
      update:async ({type:"user/update",payload},{select,put,update,all}) => {
        const {id} = select(({user}) => user);
        if(id === payload.id){
         await all([
            put({type:"user/updateName",payload:payload.name}),
            put({type:'user/updateId',payload:payload.id})
          ])
        }
      },
      updateName:async ({type:"user/updateName",payload},{select,put,update,all}) => {
        await update('user',{name:payload});
      },
       updateId:async ({type:"user/updateId",payload},{select,put,update,all}) => {
         await update('user',{id:payload});
      },
    },
  },
});

• 2. addStores 用于添加 store。参数与createStore相同，不同点在于，addStores 会合并到已有的 store

addStores({
  states: { todo: { id: 1, name: "todo1" } },
  actions: { todo: { update: () => {} } },
});

• 3. updateState 用于更新 store 中某个 state

updateState("user", { name: "rasir2" });

• 4. getStore 用于获取 store 中所有的 state

const store = getStore();

• 5. useSelector hooks 用于获取 store，用于React组件中。当store变化时，会触发react更新。

const user = useSelector(({ user }) => user);

• 6. useUpdateStore hooks 用于更新 store，用于React组件中。

const update = useUpdateStore("user");
update({ name: "rasir2" });

• 7. select 用于获取 store，用户函数中获取最新的状态数据，不会触发react更新。

const user = select(({ user }) => user);

• 8. useDispatch hooks用于获取 dispatch，用于React组件中。用于替代redux的 useDispatch。获取的dispatch函数与9中的是一样的。

const dispatch = useDispatch();
dispatch({ type: "user/update", payload: { id: 2, name: "rasir2" } });

• 9. dispatch 用于获取触发 action 的方法

dispatch({ type: "user/update", payload: { id: 2, name: "rasir2" } });

• 10. 高阶组件(HOC)connect 类似于 react-redux 的 connect，用于将 store 中的 state 和 dispatch 与组件进行绑定

const App = ({ name, update }) => {
  return (
    <button onClick={() => update({ id: 1, name: "rasir2" })}>{name}</button>
  );
};
export default connect(
  ({ user: { name } }) => ({ name }),
  (dispatch) => ({
    update: (payload) => dispatch({ type: "user/update", payload }),
  })
)(App);

jotai 原有api 均可直接使用