Cannot access updated state from mapStateToProps, undefined - reactjs

Question

I'm new to redux and am having trouble accessing state from mapStateToProps. I'm trying to create a 'folder' when the user enters the folder name and submits. I've managed to update the state with an array of folder names but can't manage to access the folder array and use this to create my Folder components.
Here is a container component that is supposed to give access to 'folders' in my Folders component:
import { connect } from 'react-redux';
import Folders from './Folders';
const mapStateToProps = state => {
return {
folders: state.folders
}
}
const Cabinet = connect(
mapStateToProps
)(Folders);
export default Cabinet;
Here is the component im trying to access the state from:
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;
'folders' is always undefined when I update data in the store.
I'm not quite sure what I'm doing wrong, I've been working through the basics tutorial in the Redux docs but think I may be fundamentally misunderstanding something.
Here's the code I used to update the store:
Reducer
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;
The button to 'create' a folder:
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

Try changing your mapStateToProps method to this:
const mapStateToProps = ({handleFolders: {folders}}) => ({
folders
});
When your're combining your reducers you must access them first using it's name. Your reducer is called handleFolders and it has property folders