Use this package to generate reducer and action creators automatically. All you need to do is passing the initial state and an object which contains all case reducers.
importtype{PayloadAction}from'quickly-use-reducer';import{createSlice}from'quickly-use-reducer';constslice=createSlice([]asTodo[],{setTodos:(state,action:PayloadAction<Todo[]>)=>action.payload,addTodo:(state,action:PayloadAction<Todo>)=>[...state,action.payload],checkTodo:(state,action:PayloadAction<{id:string;checked:boolean}>)=>{const{ id, checked}=action.payload;returnstate.map(todo=>{if(todo.id===id)return{ ...todo,isCompleted:checked};returntodo;});},deleteTodo:(state,action:PayloadAction<string>)=>state.filter(todo=>todo.id!==action.payload),});const{ initialState,actionCreators:{ setTodos, addTodo, checkTodo, deleteTodo}, reducer,}=slice;constTodoApp=()=>{const[todos,dispatch]=useReducer(reducer,initialState);return(<div>{todos.map(todo=>(<divkey={todo.id}onClick={()=>dispatch(deleteTodo(todo.id))}>{todo.content}</div>))}</div>);};createSlice accepts two parameters, and these parameters are all required.
The initial state of your reducer. It helpscreateSlice to generate correct action creators.
An object contains all your case reducers. A case reducer is a piece of the main reducer, it works like a normal reducer, but only handles one case.
A case reducer can accepts 0 ~ 2 parameters, and should return a new state with the same type of the initial state.
constslice=createSlice(0,{// 0 parameterreset:()=>0,// 1 parameterincrement:state=>state+1,// 2 parameters// typescript: (state, action: PayloadAction<number>) => state + action.payloadadd:(state,action)=>state+action.payload,});createSlice will return an object which containsinitialState,actionCreators andreducer.
The same as the first parameter.
A object contains all action creators, their name are the same as thereducers' property. For example the aboveslice will generate anactionCreators object which containsreset,increment andadd.
const{ reset, increment, add}=slice.actionCreators;A reducer function. You can pass it touseReducer directly.
const[state,dispatch]=useReducer(slice.reducer,slice.initialState);