How to re-render components when change in store in Redux? - reactjs

Question

I'm trying to make my first application with Redux, I've already made a version of this without Redux and I know that Redux isn't necessarily needed for this but I want to learn Redux.
I have a store which has an array of to-do items, my action successfully dispatches and updates the store.
My list of task components connects to the store and renders each item in the array as its own component.
On initial load, my to-do list shows the to-do items from the store's initial state, but once I update the state the new items from the state do not get rendered. Instead the map method to return the array of components says it 'cannot read property 'map' of undefined'.
How do I solve this?
Cheers.
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import Container from './components/Container.js'
import TaskReducer from './reducers/Task.js'
require("./index.css");
const defaultState = {
items: [
"task 1",
"task 2"
]
};
const store = createStore(TaskReducer, defaultState);
// Allows access to store in console log
window.store = store;
ReactDOM.render( (
<Provider store={store}>
<Container />
</Provider>
),
document.getElementById('wrapper')
);
import React from 'react';
import ReactDOM from 'react-dom';
import TaskList from './TaskList.js';
import { createStore, bindActionCreators } from 'redux';
import * as ActionCreators from '../actions/Task.js';
import Redux from 'redux';
import {connect} from 'react-redux'
class Container extends React.Component {
constructor() {
super();
}
render() {
// What does this do???
const {dispatch} = this.props;
const deleteItem = bindActionCreators(ActionCreators.deleteTodoItem, dispatch);
const addItem = bindActionCreators(ActionCreators.addTodoItem, dispatch);
function _onSubmit(e) {
e.preventDefault();
addItem(e.target.elements.task.value);
// Resets the form
e.target.reset();
}
return (
<div className="">
<header className="header">
<h1>To Do:</h1>
</header>
<form autoComplete="off" onSubmit={_onSubmit}>
<input name="task" placeholder="Task" autoComplete="off"></input>
</form>
<TaskList />
</div>
);
}
}
const mapStateToProps = state => (
{
items: state.items
}
);
export default connect(mapStateToProps)(Container);
import React from 'react';
import Task from './Task';
import { connect } from 'react-redux';
let TaskList = (props) => {
console.log('items', props.items);
var tasks = (props.items).map( (item, key) => { return <Task data={item} key={key} listItemKey={key} /> })
return(
<ul className="task-list">
{tasks}
</ul>
);
}
const mapStateToProps = state => (
{
items: state.items
}
);
export default connect(mapStateToProps)(TaskList);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
import * as action from '../actions/Task.js'
export default function toDoItems(state = [], action) {
switch(action.type) {
case 'DELETE_ITEM':
return [
...state,
];
case 'ADD_ITEM':
console.log('ADD ITEM');
console.log('Submitted value = ', action.submittedValue)
return [
...state,
// Reducer gets action object item and appends to array
action.submittedValue
]
default:
return state;
}
}
--- Reducer ---
import * as action from '../actions/Task.js'
export default function toDoItems(state = [], action) {
switch(action.type) {
case 'DELETE_ITEM':
return [
...state,
];
case 'ADD_ITEM':
console.log('ADD ITEM');
console.log('Submitted value = ', action.submittedValue);
console.log('the state', state);
return [
...state,
// Reducer gets action object item and appends to array
action.submittedValue
]
default:
return state;
}
}
--- Action ---
export function addTodoItem(submittedValue) {
return {
type: 'ADD_ITEM',
// The action object returned has the submittedValue
submittedValue
}
}
export function deleteTodoItem() {
return {
type: 'DELETE_ITEM',
}
}

Answer 1

I have edited the TaskList component. You are not using the map function correctly
import React from 'react';
import Task from './Task';
import { connect } from 'react-redux';
let TaskList = (props) => {
console.log('items', props.items);
var tasks = undefined;
if(props.items && props.items.length > 0 ){
tasks = props.items.map( (item, key) => { return <Task data={item}
key={key} listItemKey={key} /> })
} //edited code
return(
<ul className="task-list">
{tasks}
</ul>
);
}
const mapStateToProps = state => (
{
items: state.items
}
);
export default connect(mapStateToProps)(TaskList);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
And as for the store use the following to configure store in your main file.
...
import TaskReducer from './reducers/Task.js';
import * as redux from 'redux';
function configure(initialState = {}){
const reducers = redux.combineReducers({
tasks : TaskReducer
});
let store = redux.createStore(reducers, initialState);
return store;
};
const store = configure();
// Allows access to store in console log
window.store = store;
ReactDOM.render( (
<Provider store={store}>
<Container />
</Provider>
),
document.getElementById('wrapper')
);