@nebula-note/redux-hooks

English | 中文文档

@nebula-note/redux-hooks is a lightweight solution for state management fully driven by hooks, built on top of Redux, React-Redux, and @reduxjs/toolkit. No actions, no reducers, just hooks.

Installation

npm i @nebula-note/redux-hooks 

or

 yarn add @nebula-note/redux-hooks

Configure Store

The parameters accepted by configureStore are the same as those in @reduxjs/toolkit configureStore. If your project is already using @reduxjs/toolkit, it can be easily switched over.

import { configureStore } from '@nebula-note/redux-hooks';
const store = configureStore();

Usage

The usage of useRedux is similar to React’s useState, but it includes an additional parameter for the state name. In the code below, REDUX_KEY corresponds to the state name in the Redux store, equivalent to the name parameter in @reduxjs/toolkit’s createSlice. By using the same REDUX_KEY, you can easily share state data across different pages or components.

import { useRedux } from '@nebula-note/redux-hooks';

const REDUX_KEY = 'exampleReduxName';
type ExampleState = {
    count:number
}

export const useExampleRedux = () => {
     const { state, setState } = useRedux<ExampleState>(REDUX_KEY, {count:0});
     
     const handleAdd = () => {
        setState(state.count + 1);
     }
     
     const handleReduce = ()=>{
        setState(state.count - 1);
     }
        
     return(
        <div style={{display:'flex'}}>
            <button onclick={handleAdd}>+</button>
            <div>{state.count}</div>
            <button onclick={handleReduce}>-</button>
        </div>
     )
}

Methods and Properties

Here are the methods and properties provided by useRedux:

state

State data

getStateSync: () => SliceType

Return the latest state value in Redux

setState: (payload: SliceType) => void

Set the state value in Redux

setStateSync: (payload: SliceType) => void

Set the state value in Redux synchronously, which is equivalent to setState.The difference is that after using setStateSync, you can use getStateSync to get the latest state.

updateState(payload: Partial<SliceType>)=> void

Update the state value in Redux, and the state value will be merged with the previous state value.The parameter is partial state content. It is particularly important to note that for Array properties, updateState will not merge the Array properties but will directly overwrite the corresponding properties in Redux with the provided data.

updateStateSync(payload: Partial<SliceType>)=> void

Like updateState, after the call is completed, you can use getStateSync to retrieve the latest state data.

take:(actionType: "setState" | "updateState") => Promise<() => void>

This method is used to listen for changes in the submission state of an action. It returns a promise, which is resolved after the action is executed, and it returns a function to cancel the listener.

const takeHandle = take('setState');
takeHandle.then((offTake) => {
  console.log('State updated');
  offTake();
})

updateState({dataList: resp.data, fetchStatus: 'Success'});

takeOnce: (actionType: "setState" | "updateState") => Promise

Similar to the take function, but it only executes once. After calling, it returns a promise object, and when resolved, the returned content is empty.