# rasir-jotai-redux

**Repository Path**: rasir/rasir-jotai-redux

## Basic Information

- **Project Name**: rasir-jotai-redux
- **Description**: 封装jotai模拟redux-saga的api
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-06-19
- **Last Updated**: 2024-07-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# `@rasir/jotai-redux`

> 封装 jotai 模拟 redux-saga 的 api

## 使用方法

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

- 1. `createStore` 用于初始化 store

```js
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

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

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

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

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

```js
const store = getStore();
```

- 5. `useSelector` 用于获取 store

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

- 6. `useUpdateStore` 用于更新 store

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

- 7. `select` 用于获取 store

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

- 8. `useDispatch` 用于获取 dispatch

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

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

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

- 10. 高阶组件(HOC)`connect` 类似于 react-redux 的 connect，用于将 store 中的 state 和 dispatch 与组件进行绑定，本工具没有集成该高级函数，但源码如下，可以自行编写

```js
import React from "react";
import {
  useDispatch,
  useSelector,
  IDispatch,
  ISelector,
} from "@rasir/jotai-redux";

const connect = (
  mapToProps?: ISelector,
  mapToDispatch?: (dispatch: IDispatch) => any
) => {
  return (Comp: React.FC<any> | React.ComponentClass) => {
    return (props: any) => {
      const mapProps = mapToProps ? useSelector(mapToProps) || {} : {};
      const dispatch = useDispatch();
      const mapDispatch = mapToDispatch
        ? mapToDispatch(dispatch) || { dispatch }
        : { dispatch };
      return <Comp {...props} {...mapProps} {...mapDispatch} />;
    };
  };
};

export default connect;
```

使用方法

```js
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 均可直接使用