Невозможно получить доступ к обновленному состоянию из mapStateToProps, не определено

Question

Я новичок в редуксе и у меня проблемы с доступом к состоянию из mapStateToProps. Я пытаюсь создать «папку», когда пользователь вводит имя папки и отправляет. Мне удалось обновить состояние с помощью массива имен папок, но мне не удалось получить доступ к массиву папок и использовать его для создания компонентов папки.

Вот компонент контейнера, который должен предоставлять доступ к «папкам» в моем компоненте «Папки»:

import { connect } from 'react-redux';
import Folders from './Folders';

const mapStateToProps = state => {
    return {
        folders: state.folders
    }
}

const Cabinet = connect(
    mapStateToProps
)(Folders);

export default Cabinet;

Вот компонент, из которого я пытаюсь получить доступ к состоянию:

import React from 'react';
import Folder from './Folder';
import AddFolderButton from './AddFolderButton';

const Folders = ({ folders }) => (

            <div className="Folders">
                <h2>Folders</h2>
                <div className="Drawer">
                    {console.log(folders)}
                    <AddFolderButton /> 
                </div>
            </div>
)

export default Folders;

«папки» всегда неопределены, когда я обновляю данные в магазине. Я не совсем уверен, что я делаю не так, я работал над учебным пособием по основам в документации Redux, но думаю, что, может быть, я что-то неправильно понял.

Вот код, который я использовал для обновления магазина:

Редуктор

import { combineReducers } from 'redux';

const initialState = {
    folders: []
}

function handleFolders(state = initialState, action) {
    switch(action.type) {
        case 'CREATE_FOLDER':
            return {
                ...state, folders: [
                    ...state.folders,
                    {
                        name: action.name
                    }
                ]
            }
        default:
            return state;
    }
}

let rootReducer = combineReducers({
    handleFolders
})

export default rootReducer;

Кнопка «создать» папку:

class AddFolderButton extends React.Component {
    constructor() {
        super();
        this.state = {
            isClicked: false,
        };
        this.handleClick = this.handleClick.bind(this);
        this.handleOutsideClick = this.handleOutsideClick.bind(this);
        this.textInput = null;
    }

    handleClick() {
        if(!this.state.isClicked) {
            document.addEventListener('click', this.handleOutsideClick, false);
        } else {
            document.removeEventListener('click', this.handleOutsideClick, false);
        }
        this.setState(prevState => ({
            isClicked: !prevState.isClicked
        }));
    }

    handleOutsideClick(e) {
        if(this.node.contains(e.target)) {
            return;
        }
        this.handleClick();
    }

    render() {    
        return(
            <div className="new-folder-input" ref={ node => {this.node = node;}}>
                {!this.state.isClicked && (
                <button className="add-folder-btn" onClick={this.handleClick} >
                    <FontAwesomeIcon icon={faPlus} size="4x"/>
                </button>
                )}
                {this.state.isClicked && (
                    <div className="folder-input">
                        <form onSubmit={e => {
                            e.preventDefault()
                            this.props.createFolder(this.textInput.value)
                            this.handleClick();
                        }}
                        >
                            <input ref={node => this.textInput = node} 
                                type="text"
                                value={this.state.value}
                                autoFocus 
                                placeholder="Enter folder name" />
                            <button type="submit">Add Folder</button>
                        </form>
                    </div>
                )}
            </div>
        );
    }
}

const mapDispatchToProps = dispatch => ({
    createFolder: name => dispatch(createFolder(name))
})

export default connect(
    null,
    mapDispatchToProps
)(AddFolderButton);

Answer 1

Попробуйте изменить метод mapStateToProps на этот:

const mapStateToProps = ({handleFolders: {folders}}) => ({
    folders
});

Когда вы объединяете свои редукторы, вы должны сначала получить к ним доступ, используя его имя. Ваш редуктор называется handleFolders и имеет свойство folders