使用 combineReducers() 时的状态未定义

Question

当我想组合我的 2 个减速器时，我无法获得我的状态。

当我只使用一个减速器时一切正常，但当我尝试使用 combineReducers() 时，我无法再获得我的状态。

 const initialState = 
{ 
    films: []
}

const filmsReducer = (state = initialState, action) => {
    let nextState;

    switch (action.type)
    {
        [...]
        default:
            return state;
    }
}

export default filmsReducer;

const initialState = { checkedCategories: [''] }

const categoriesReducer = (state = initialState, action) => {
    let nextState;

    switch (action.type) {
        [...]
        default :
            return state;
    }
}

export default categoriesReducer;

import { combineReducers } from 'redux';

import films from './films-reducer';
import categories from './categories-reducer';

export default combineReducers({films, categories});

import { createStore } from 'redux';

import rootReducer from '../reducers/index';

export default createStore(rootReducer);

下面是我得到一个未定义的地方

import React, { useEffect, useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';

export const Categories = (props) => {
    const [categories, setCategories] = useState([]);
    const checkedCategories = useSelector(state => state.checkedCategories)
    const dispatch = useDispatch();

    const categoryToggle = (category) => {
        console.log(checkedCategories);
        if (checkedCategories.findIndex(item => item.id === category.id) !== -1)
            return (<div>caca</div>)
    }
[...]
}

我得到了初始状态和两者的默认返回值。

Answer 1

通过添加combineReducers，您改变了状态对象的结构。

该结构以前是包含checkedCategories 的单个对象。像这样的：

state: {
  checkedCategories: ['']
}

但现在是这样的：

state: {
  films: {
    films: []
  }, 
  categories: {
    checkedCategories: ['']
  }
}

您需要相应地调整您的选择器：

const checkedCategories = useSelector(state => state.categories.checkedCategories)
//                                                   ^ nested one level deeper now

Answer 2

您可能想尝试将导出的组合减速器命名为 rootReducer -

export const rootReducer = combineReducers({films, categories});

或者如果你喜欢冗长

const rootReducer = combineReducers({films, categories});

export rootReducer;

祝你好运，黑客愉快。