ReduxToolkit: Как синхронизировать c изменения магазина в локальное состояние? - PullRequest
Новая
       12

ReduxToolkit: Как синхронизировать c изменения магазина в локальное состояние?

0 голосов
/ 14 апреля 2020

В моем компоненте я загружаю исходные данные из API следующим образом: 

    const dispatch = useDispatch();
    const groups = useSelector(selectGroups);
    const [localGroupState, setLocalGroupsState] = useState(groups);

    useEffect(() => {
        dispatch(loadAsync());
    }, []);

export const selectGroups = (state: RootState) => state.userGroups.groups;

export const loadAsync = (): AppThunk => dispatch => { 
    dispatch(loading());  
    axios.get('/data', { headers: { 'Authorization': `Bearer ${getToken()}` } })
    .then((axiosResponse: AxiosResponse<MainState>) => {
        dispatch(loaded(axiosResponse.data));
        console.log('all good')
    })
    .catch(() => {
        console.error('no good')
    });    
};

Но localGroupState пуст, а groups - нет. Я чувствую, что мне здесь не хватает простого трюка. Помощь очень ценится.

1 Ответ

2 голосов
/ 14 апреля 2020

Если вы хотите выполнить сортировку и фильтрацию групп, то ваши локальные состояния должны соответствовать критериям сортировки и фильтрации. Сортированные и отфильтрованные группы должны быть расчетным значением, а не состоянием. 

const dispatch = useDispatch();
const groups = useSelector(selectGroups);
const [sort, setSort] = useState('ascending');
const [filter, setFilter] = useState('something');

const sortedGroups = [...groups].sort(
  // replace this with whatever your sorting logic is
  sort === 'ascending' ? (a, b) => a - b : (a, b) => b - a
).filter(() => /* some filtering code */);

useEffect(() => {
    dispatch(loadAsync());
}, []);

По соображениям производительности может потребоваться запомнить сортировку и фильтрацию, чтобы она запускалась только при изменении groups, sort или filter: 

const sortedGroups = useMemo(() => {
  return [...groups].sort(
    // replace this with whatever your sorting logic is
    sort === 'ascending' ? (a, b) => a - b : (a, b) => b - a
  ).filter(() => /* some filtering code */);
}, [groups, sort, filter]);
...