reduxjs/toolkit 用法

sotre

import { useDispatch, useSelector, TypeUseSelectorHook } from 'react-redux';
import { configureSotre } from '@reduxjs/toolkit';
import { paramsReducer } from './slices';

export const store = configureSotre({
    reducer: {
        params: paramsReducer
    }
})

export type RootState = ReturnType<typeof sotre.getState>;
export type AppDispatch = typeof sotre.dispatch;
export cosnt useDemoDisPatch = () => useDispatch<AppDispatch>();
export const useDemoSelector = TypeUseSelectorHook<RootState> = useSelector;

切片slices.ts

// slices.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit';


export const params = createSlice({
    name: 'params',
    initialState: params_initialState,
    reducers: {
        setParams: (state, action) => {
            state = action.payload;
        }
        setFilters: (state, action) => {
            state.filters = action.payload;
        }
    }
})

// dispatch用到
export const { setParams, setFilters } = params.actions;

// 在soter中要用到
export const paramsReducer = params.reducer;

取值 selectors.ts

// selectors.ts

import { createSelector } from 'reselect';
import type { RootState } from './store';

export const getParams = (state: RootState) => state.params;

export const getFilters = createSelector(
    [getParams],
    (params) => params.filters;
)

使用 demo.tsx

import { Provider } from 'react-redux';
import React, { useMemo, useEffect, useCallback } from 'react';
import { useDemoDisPatch, useDemoSelector, store } from './store';
import { getParams } from './selector';
import { setFilters } from './slices';
import { store } from './store;


const dispatch = useDemoDisPatch();
interface SidebarFilterProps {
    /////
}
export const SidebarFilter:React.FC<SidebarFilterProps> = props => {
    const dispatch = useDemoDisPatch();
    const { filters } = useDemoSelector(getParams);
    const onClick = useCallback(() => {
        const newFilters = [1]
        dispatch(setFilters(newFilters))
       
    })
    return <Button onClick={onClick}>点击<Button>
} 

interface RoutePageProps {}

export const DemoPage:React.FC<RoutePageProps> = (props) => {
     return <Provider sotre={store}>
         <SidebarFilter/>
     </Provider>
}

相关文档

github.com/reduxjs/res…

redux-toolkit.js.org/api/configu…

个人笔记