Develop Reference

Not able to add todo in a todo-list using react and redux. What am I doing wrong?

render() {
const listItems = this.props.todos.map((todo) =>
<ListItem key={todo.id} id={todo.id} content={todo.content} onEdit={this.onEditItem}/>
)
return <>
<ul className="todo-list">
{listItems}
</ul>
{/* <AddItem/> */}
<div className="add-item">
<input type="text" onChange={this.onChangeValue}/>
<button type="submit" onClick={this.onAddItem}>Add Item</button>
</div>
</>
}
onAddItem = () => {
this.props.submitNewTodo({ id: this.props.todos.length + 1, content: this.state.value})
};
When I console.log this.props.todos.length it returns the value 2 and this.state.value returns the value typed into the input. But the "Add Item" button doesn't work.
I have mapped submitNewTodo to dispatch addTodo(newTodo) like so
const mapDispatchToProps = (dispatch) => {
return {
submitNewTodo: function(newTodo) {
dispatch(addTodo(newTodo));
}
}
}
Complete code is in this codepen.
https://codepen.io/blenderous/pen/MWjdyoN?editors=0011

Your addTodo action creator is wrong:
const addTodo = (todo) => {
type: 'ADD_TODO',
todo
};
this is a method that treats
type: 'ADD_TODO',
todo
as a method body. (type being used as the break label for the string 'ADD_TODO', followed by todo)
If you want to return an action, these two notations are correct:
const addTodo = (todo) => {
return {
type: 'ADD_TODO',
todo
}
};
// note the parantheses!
const addTodo = (todo) => ({
type: 'ADD_TODO',
todo
});

The first thing I notice with your code is that your reducer is not following the pattern Redux uses.
const todoReducer = ( state = [{ id: 1, content: "Call Client" },
{ id: 2, content: "Write Log" }], action ) => {
if (action.type == ADD_TODO) {
return state.concat(action.todo);
}
else {
return state;
}
}
The first rule that it breaks is that this should be a switch, not an if statement.
switch (action.type) {
case 'ADD_TODO':
// create new todos with the added todo
const newTodos = [
...state.todos,
action.payload.todo,
]
// new state object
return {
...state,
todos: newTodos,
}
default:
return {
...state,
}
}
The second rule is that you want to always have a payload property to follow the proper flux patterns. That payload would contain all of your data.
const addTodo = (todo) => {
type: 'ADD_TODO',
payload: {
todo,
}
};

Can someone show me what's wrong with my Redux state?

EDIT
The component that state is not rendering in is called TournamentShow, which calls the state and whatever functions I need to use for the Show page.
Nested within it is a conditional to call one of 3 pages, based on
Tournament.Status === "Open",
Tournament.Status === "Closed", and
Tournament.Status === "Complete"
Tournament Show:
import React, { Component } from 'react';
import { SignUpPage, HostUI, StartBracket, Results } from './TournamentScreens';
import {
showTournament,
addParticipant,
closeTournament,
shuffleParticipants
} from '../../actions/tournamentActions';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Spinner } from 'reactstrap';
class TournamentShow extends Component {
constructor(props) {
super(props);
this.onSignUp = this.onSignUp.bind(this);
this.onStartTournament = this.onStartTournament.bind(this);
this.onShuffleParticipants = this.onShuffleParticipants.bind(this);
};
componentDidMount() {
const id = this.props.match.params.id;
this.props.showTournament(id);
};
static propTypes = {
tournament: PropTypes.object.isRequired,
auth: PropTypes.object.isRequired
};
onSignUp(tournamentId, user) {
this.props.addParticipant(tournamentId, user);
};
onShuffleParticipants(array) {
let currentIndex = array.length, temporaryValue, randomIndex;
while(0 !== currentIndex) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
};
onStartTournament(tourneyId) {
const { participants } = this.props.tournament.showTournament;
// Randomize participants
let reorderedParticipants = [];
const shuffledParticipants = this.onShuffleParticipants(participants);
shuffledParticipants.forEach(participant => {
reorderedParticipants.push(participant);
});
// Send new participants list to backend
this.props.shuffleParticipants(tourneyId, reorderedParticipants);
// Set Status to "Closed"
this.props.closeTournament(tourneyId);
};
render() {
console.log(this.props.tournament)
const loading = this.props.tournament.loading || !this.props.tournament.showTournament;
if(loading) {
return <Spinner color="light" />
} else {
if(this.props.tournament.showTournament.status === "Complete") {
return (
<Results />
);
} else if(this.props.tournament.showTournament.status === "Closed") {
return (
<div>
<HostUI
tournament={this.props.tournament.showTournament}
/>
<StartBracket
tournament={this.props.tournament.showTournament}
/>
</div>
);
} else {
return (
<SignUpPage
tournament={this.props.tournament.showTournament}
auth={this.props.auth}
onSignUp={this.onSignUp}
onStartTournament={this.onStartTournament}
/>
);
}
};
};
};
const mapStateToProps = state => ({
tournament: state.tournament,
auth: state.auth
});
export default connect(mapStateToProps,
{ showTournament, addParticipant, closeTournament, shuffleParticipants }
)(TournamentShow);
Tournament Show Screens:
import React from 'react';
import moment from 'moment';
import { TournamentSignUp, StartTournament } from './resources/buttons';
import { TournamentRules } from './resources/rulesets';
import { Button } from 'reactstrap';
import { Link } from 'react-router-dom';
// Status === "Open"
export const SignUpPage = ({ tournament, auth, onSignUp, onStartTournament }) => {
};
// Status === "Closed"
export const HostUI = ({ tournament }) => {
const { players } = tournament.bracket;
return (
<div style={{color:"lightgrey"}}>
<h1>Host UI</h1>
{
players && players.map(player => (
<div>
{player.username}
</div>
))
}
</div>
);
};
export const StartBracket = ({ tournament }) => {
const { title, hostedBy, participants } = tournament;
return (
<div className="text-center" style={{color:"lightgrey", backgroundColor: "#333333"}}>
<h1>{ title }</h1>
<h4>By { hostedBy }</h4>
<h4>{participants && participants.length}-player bracket</h4>
<br /><Link to="/">Back to Tournaments main page</Link>
</div>
);
};
// Status === "Complete"
export const Results = () => {
};
Status===Closed shows both of those central components.
HostUI renders just the players array (which had just been updated right before the status switch/re-render)
StartBracket shows stuff from ShowTournament, which is all data that had already been set in the state
ORIGINAL --------------------------
I'll mark with // comment which case does not work
import {
GET_TOURNAMENTS,
SHOW_TOURNAMENT,
ADD_TOURNAMENT,
ADD_TOURNAMENT_FAIL,
EDIT_TOURNAMENT,
EDIT_TOURNAMENT_FAIL,
DELETE_TOURNAMENT,
TOURNAMENTS_LOADING,
TOURNAMENT_LOADING,
USER_JOINS_TOURNAMENT,
TOURNAMENT_SIGN_UP_FAIL,
TOURNAMENT_STATUS_UPDATE,
TOURNAMENT_STATUS_FAILED,
SHUFFLE_PARTICIPANTS,
SHUFFLE_FAILED
} from '../actions/types';
const initialState = {
tournaments: [],
showTournament: {},
loading: false,
};
export default function(state = initialState, action) {
switch(action.type) {
case GET_TOURNAMENTS:
return {
...state,
tournaments: action.payload,
loading: false
};
case SHOW_TOURNAMENT:
return {
...state,
showTournament: action.payload,
loading: false
};
case ADD_TOURNAMENT:
return {
...state,
tournaments: [action.payload, ...state.tournaments]
};
case DELETE_TOURNAMENT:
return {
...state,
tournaments: state.tournaments.filter(tournament => tournament._id !== action.payload)
};
case TOURNAMENTS_LOADING:
case TOURNAMENT_LOADING:
return {
...state,
loading: true
};
case USER_JOINS_TOURNAMENT:
return {
...state,
...state.showTournament.participants.push(action.payload)
};
case TOURNAMENT_STATUS_UPDATE: // Occurs with SHUFFLE_PARTICIPANTS, which doesn't work
return {
...state,
...state.showTournament.status = action.payload
};
case SHUFFLE_PARTICIPANTS: // Does not work
return {
...state,
...state.showTournament.bracket.players.push(action.payload)
}
case EDIT_TOURNAMENT:
case ADD_TOURNAMENT_FAIL:
case EDIT_TOURNAMENT_FAIL:
case TOURNAMENT_SIGN_UP_FAIL:
case TOURNAMENT_STATUS_FAILED:
case SHUFFLE_FAILED:
return {
...state,
}
default:
return state;
};
};
Most of that works.
The ones I'm sure I screwed up are TOURNAMENT_STATUS_UPDATE and SHUFFLE_PARTICIPANTS, although status update works as intended.
This is a tournament app whose show page renders 3 different components based on showTournament.status
...
if(loading) {
return <Spinner color="light" />
} else {
if(this.props.tournament.showTournament.status === "Complete") {
return (
<Results />
);
} else if(this.props.tournament.showTournament.status === "Closed") {
return (
<div>
<HostUI
tournament={this.props.tournament.showTournament}
/>
<StartBracket
tournament={this.props.tournament.showTournament}
/>
</div>
);
} else {
return (
<SignUpPage
tournament={this.props.tournament.showTournament}
auth={this.props.auth}
onSignUp={this.onSignUp}
onStartTournament={this.onStartTournament}
/>
);
}
};
Component button:
randomizes Tournament.participants and sends it to Tournament.bracket.players
sets Tournament.status === "Closed"
That updates the page and renders the Status: "Closed" page correctly.
The problem is, it only displays whatever I already had loaded in the state. (stuff from SHOW_TOURNAMENT)
The bracket.players array I sent the randomized user list to doesn't display until I refresh the page.

You need to shallow copy each level of state you are updating. Also, ...state.showTournament.bracket.players.push(action.payload) will simply attempt to spread in the return value of the push which is just the new length of the array. This isn't what you want.
case TOURNAMENT_STATUS_UPDATE:
return {
...state,
showTournament: {
...state.showTournament,
status: action.payload,
},
};
case SHUFFLE_PARTICIPANTS:
return {
...state,
showTournament: {
...state.showTournament,
bracket: {
...state.showTournatment.bracket,
players: [...state.showTournament.bracket.players, ...action.payload], // spread payload array
},
},
}

Drew's solution worked, it was just that, in order to pass an array into another array, the syntax is
players: [...state.showTournament.bracket.players. ...action.payload]
rather than players: [...state.showTournament.bracket.players, action.payload]
Good day

Why changes from local state don't go into global state?

To-Do-List
When I try to edit my created task, I see some modifications, but only in local State. When I look at the data of the global state, nothing change, the data remains the same as after creating the tasks object.
It is also interesting to note that when case EDIT_TASK has worked , action.id = values from Input, and action.task = undefined
P.S: Put all the component code below, maybe there was a mistake somewhere.
P.S: Sorry for ENG
Component's code
import React from 'react'
import s from "./../../App.module.css";
class Item extends React.Component {
state = {
statusChange: false,
task: this.props.task
}
activeStatusChange = () => {
this.setState( {
statusChange: true
}
);
}
deActivateStatusChange = () => {
this.setState( {
statusChange: false
}
);
this.props.editTask(this.props.task)
}
onStatusChange = (e) => {
this.setState({
task: e.target.value
})
}
render(){
return (
<div className={s.item}>
<span onClick={this.props.editStatus} className={s.statusTask}>
{this.props.status ? <img src="https://img.icons8.com/doodle/48/000000/checkmark.png"/>
: <img src="https://img.icons8.com/emoji/48/000000/red-circle-emoji.png"/>}
</span>
{ this.state.statusChange
? <input onChange={this.onStatusChange} autoFocus={true} onBlur={this.deActivateStatusChange} value={this.state.task} />
: <span className={this.props.status === true ? s.task : s.taskFalse} onClick={this.activeStatusChange}> {this.state.task} </span>}
<span onClick={this.props.deleteTask} className={s.close}><img src="https://img.icons8.com/color/48/000000/close-window.png"/></span>
</div>
)
}
}
export default Item;
Reducer's code
import React from 'react'
import shortid from 'shortid';
const ADD_TASK = 'ADD_TASK'
const EDIT_TASK = 'EDIT_TASK'
const initialState = {
tasks: []
};
const mainReducer = (state = initialState, action) => {
switch (action.type) {
case ADD_TASK: {
return {
...state,
tasks: [{
id: shortid.generate(),
task: action.task,
status: false
}, ...state.tasks]
}
}
case EDIT_TASK: {
return {
...state,
tasks: state.tasks.filter((t) => t.id === action.id ? {...t, task: action.newTask} : t)
}
}
default:
return state
}
}
//window.store.getState().mainReducer.tasks
export const addTask = task => ({type: 'ADD_TASK', task});
export const editTask = (id,newTask) => ({type: 'EDIT_TASK', id, newTask})
export default mainReducer;
Parent's component:
import React from "react";
import s from "./../../App.module.css";
import CurrentTasks from "../current-tasks";
import FilterButtonTasks from "../filter-button-tasks";
import ListTasks from "../tasks-list";
class SetForm extends React.Component {
constructor(props) {
super(props);
this.state = {
text: ''
}
}
onInputChange = event => {
this.setState({
[event.target.name]: event.target.value
})
}
handleSubmit = event => {
event.preventDefault();
if(this.state.text === '') {
return undefined
}
this.props.addTask(this.state.text)
this.setState({
text: ''
})
}
filterTasks = (tasks, activeFilter) => {
switch (activeFilter) {
case 'done': {
return tasks.filter(task => task.status);
}
case 'active': {
return tasks.filter(task => !task.status)
}
default:
return tasks;
}
}
render() {
const currentTasks = this.filterTasks(this.props.tasks, this.props.filter);
return (
<div>
<form onSubmit={this.handleSubmit}>
<div>
<input name={"text"} onChange={this.onInputChange} value={this.state.text}placeholder={"Set your task"} className={s.setTask}/>
<button onClick={this.handleSubmit} className={s.add}>ADD</button>
<button onClick={this.props.removeAllTasks} className={s.clearAll}>Clear</button>
</div>
</form>
<CurrentTasks tasks={this.props.tasks}/>
<ListTasks currentTasks={currentTasks} editStatus={this.props.editStatus} deleteTask={this.props.deleteTask} editTask={this.props.editTask}/>
<FilterButtonTasks currentTasks={currentTasks} changeFilter={this.props.changeFilter} removeAllDone={this.props.removeAllDone}/>
</div>
)
}
}
export default SetForm;
one more:
import React from 'react'
import Item from './SetItem/item'
const ListTasks = ({currentTasks,editStatus,deleteTask,editTask}) => {
return (
currentTasks.map(t => (<Item editStatus={() => editStatus(t.id)}
deleteTask={() => deleteTask(t.id)}
key={t.id} task={t.task} status={t.status} editTask={editTask}/>))
)
}
export default ListTasks;

Since, you are only updating the local state onStatusChange the state does not get updated in global state. So on deActivateStatusChange you need to call this.props.editTask with updated state, that is this.state.task
deActivateStatusChange = () => {
this.setState({
statusChange: false
});
this.props.editTask(this.state.task); // change is here
};
The problem is in your EDIT_TASK reducer:
Change
state.tasks.filter((t) => t.id === action.id ? {...t, task: action.newTask} : t)
To
state.tasks.map((t) => t.id === action.id ? {...t, task: action.newTask} : t)
map will update the object, not filter
Code should be:
case EDIT_TASK: {
return {
...state,
tasks: state.tasks.map((t) => t.id === action.id ? {...t, task: action.newTask} : t)
}
}
Also it seems like you are not passing id and newTask to editTask action:
const ListTasks = ({ currentTasks, editStatus, deleteTask, editTask }) => {
return currentTasks.map(t => (
<Item
editStatus={() => editStatus(t.id)}
deleteTask={() => deleteTask(t.id)}
key={t.id}
task={t.task}
status={t.status}
editTask={(newTask) => editTask(t.id, newTask)} // change current code to this
/>
));
};

React.js: props.state is blank(null)

I want to Todo List in use React.js + Redux.
I make reducer file:
import { ADD_POST, REMOVE_POST } from "../actions/index.jsx";
const initialState = {
title: "",
content: ""
};
export default function Post(state = initialState, action) {
switch (action.type) {
case ADD_POST:
return [
...state,
{
id: action.id,
title: action.title,
content: action.content
}
];
case REMOVE_POST:
return state.filter(({ id }) => id !== action.id);
default:
return state;
}
}
And, I edit App.js :
class App extends Component {
render() {
return (
<div className="App">
<Input />
<List posts={this.props.allPosts} />
</div>
);
}
}
const mapStateToProps = state => {
return {
allPosts: [state.title, state.content]
};
};
export default connect(mapStateToProps, null)(App);
And, List Component is...:
render() {
return (
<div>
<ul>
{this.props.posts.map((post, index) => (
<Item {...post} key={index} />
))}
</ul>
</div>
);
}
}
I am experiencing the error "Can not read property 'map' of undefined" and can not proceed.
How can I fix it?
I'm referring to multiple sources, but I'm having difficulty because I can only see text for one 'text' state, and two sources like 'title' and 'content' states.
-------_FIX
I fix error, but props.state is blank.
I add input tag with texts but it not change everything.
-------Actions
export const ADD_POST = "ADD_POST";
export const REMOVE_POST = "REMOVE_POST";
let nextId = 0;
export function addPost(title, content) {
return {
type: ADD_POST,
id: nextId++,
title,
content
};
}
export function removePost(id) {
return {
type: REMOVE_POST,
id
};
}

I think you're confusing with the data type of your state. The below snippet might work for you. I've kept your state as an array of posts with initialState being an empty array.
So in your reducer file, initialise the initialState as:
import {
ADD_POST,
REMOVE_POST
} from "../actions/index.jsx";
const initialState = [];
export default function Post(state = initialState, action) {
switch (action.type) {
case ADD_POST:
return [
...state,
{
id: action.id,
title: action.title,
content: action.content
}
];
case REMOVE_POST:
return state.filter(({
id
}) => id !== action.id);
default:
return state;
}
}
In App.js, in the function mapStateToProps, map allPosts to state which is an array.
class App extends Component {
render() {
return (
<div className="App">
<Input />
<List posts={this.props.allPosts} />
</div>
);
}
}
const mapStateToProps = state => {
return {
allPosts: state
};
};
export default connect(mapStateToProps, null)(App);

React Redux adding items to list carries over to other created lists.

I've been battling with this for too long, can someone point me to the right direction?
The issue: When i create a list I am able to update/delete it. I am also able to add items to it and update/delete these items. When I add another list, the items from the former gets carried over to the latter then I am unable to edit the items. If I delete the List and don't refresh the browser the items are still in the list. I need a way to tie the two together in a way that a list only knows about its items
Thanks in advance for the help.
/actions/lists.js
export const CREATE_LIST = 'CREATE_LIST'
export function createList(list) {
return {
type: CREATE_LIST,
id: uuid.v4(),
items: list.items || [],
...list
}
}
export const CONNECT_TO_LIST = 'CONNECT_TO_LIST'
export function connectToList(listId, itemId) {
return {
type: CONNECT_TO_LIST,
listId,
itemId
}
}
export const DISCONNECT_FROM_LIST = 'DISCONNECT_FROM_LIST'
export function disconnectFromList(listId, itemId) {
return {
type: DISCONNECT_FROM_LIST,
listId,
itemId
}
}
/actions/items.js
export const CREATE_ITEM = 'CREATE_ITEM'
export function createItem(item) {
return {
type: CREATE_ITEM,
item: {
id: uuid.v4(),
...item
}
}
}
export const UPDATE_ITEM = 'UPDATE_ITEM'
export function updateItem(updatedItem) {
return {
type: UPDATE_ITEM,
...updatedItem
}
}
/reducers/lists.js
import * as types from '../actions/lists'
const initialState = []
export default function lists(state = initialState, action) {
switch (action.type) {
case types.CREATE_LIST:
return [
...state,
{
id: action.id,
title: action.title,
items: action.items || []
}
]
case types.UPDATE_LIST:
return state.map((list) => {
if(list.id === action.id) {
return Object.assign({}, list, action)
}
return list
})
case types.CONNECT_TO_LIST:
const listId = action.listId
const itemId = action.itemId
return state.map((list) => {
const index = list.items.indexOf(itemId)
if(index >= 0) {
return Object.assign({}, list, {
items: list.items.length > 1 ? list.items.slice(0, index).concat(
list.items.slice(index + 1)): []
})
}
if(list.id === listId) {
return Object.assign({}, list, {
items: [...list.items, itemId]
})
}
return list
})
case types.DISCONNECT_FROM_LIST:
return state.map((list) => {
if(list.id === action.listId) {
return Object.assign({}, list, {
items: list.items.filter((id) => id !== action.itemId)
})
}
return list
})
default:
return state
}
}
/reducers/items.js
import * as types from '../actions/items'
const initialState = []
export default function items(state = initialState, action) {
switch (action.type) {
case types.CREATE_ITEM:
return [ ...state, action.item ]
case types.UPDATE_ITEM:
return state.map((item) => {
if(item.id === action.id) {
return Object.assign({}, item, action)
}
return item
})
case types.DELETE_ITEM:
return state.filter((item) => item.id !== action.id )
default:
return state
}
}
/components/List.jsx
import React from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import Items from './Items'
import Editor from './Editor'
import * as listActionCreators from '../actions/lists'
import * as itemActionCreators from '../actions/items'
export default class List extends React.Component {
render() {
const { list, updateList, ...props } = this.props
const listId = list.id
return (
<div {...props}>
<div className="list-header"
onClick={() => props.listActions.updateList({id: listId, isEditing: true})}
>
<div className="list-add-item">
<button onClick={this.addItem.bind(this, listId)}>+</button>
</div>
<Editor
className="list-title"
isEditing={list.isEditing}
value={list.title}
onEdit={title => props.listActions.updateList({id: listId, title, isEditing: false})}
/>
<div className="list-delete">
<button onClick={this.deleteList.bind(this, listId)}>x</button>
</div>
</div>
<Items
items={this.listItems}
onValueClick={id => props.itemActions.updateItem({id, isEditing: true})}
onEdit={(id, text) => props.itemActions.updateItem({id, text, isEditing: false})}
onDelete={itemId => this.deleteItem(listId, itemId)}
/>
</div>
)
}
listItems() {
props.list.items.map(id => state.items[
state.items.findIndex(item => item.id === id)
]).filter(item => item)
}
deleteList(listId, e) {
e.stopPropagation()
this.props.listActions.deleteList(listId)
}
addItem(listId, event) {
event.stopPropagation()
const item = this.props.itemActions.createItem({
text: 'New Shopping Item'
})
this.props.listActions.connectToList(listId, item.id)
}
deleteItem(listId, itemId) {
this.props.listActions.disconnectFromList(listId, itemId)
this.props.itemActions.deleteItem(itemId)
}
}
function mapStateToProps(state) {
return {
lists: state.lists,
items: state.items
}
}
function mapDispatchToProps(dispatch) {
return {
listActions: bindActionCreators(listActionCreators, dispatch),
itemActions: bindActionCreators(itemActionCreators, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(List)
/components/List.jsx
import React from 'react'
import List from './List.jsx'
export default ({lists}) => {
return (
<div className="lists">{lists.map((list) =>
<List className="list" key={list.id} list={list} id={list.id} />
)}</div>
)
}
/components/Items.jsx
import React from 'react'
import { connect } from 'react-redux'
import Editor from './Editor'
import Item from './Item'
export default class Items extends React.Component {
render () {
const {items, onEdit, onDelete, onValueClick, isEditing} = this.props
return (
<ul className="items">{items.map(item =>
<Item
className="item"
key={item.id}
id={item.id}
isEditing={item.isEditing}>
<Editor
isEditing={item.isEditing}
value={item.text}
onValueClick={onValueClick.bind(null, item.id)}
onEdit={onEdit.bind(null, item.id)}
onDelete={onDelete.bind(null, item.id)}
/>
</Item>
)}</ul>
)
}
}
export default connect(
state => ({
items: state.items
})
)(Items)
/components/Item.jsx
import React from 'react'
export default class Item extends React.Component {
render() {
const { id, isEditing, ...props } = this.props
return (
<li {...props}>{props.children}</li>
)
}
}
/components/App.jsx
class App extends React.Component {
handleClick = () => {
this.props.dispatch(createList({title: "New Shopping List"}))
}
render() {
const lists = this.props.lists
return (
<div>
<button
className="add-list"
onClick={this.handleClick}>Add Shopping List</button>
<Lists lists={lists}/>
</div>
)
}
}
export default connect(state => ({ lists: state.lists }))(App)

Assuming this is all meant to operate on a single array at a time, this part looks pretty suspicious:
case types.CREATE_LIST:
return [
...state,
{
id: action.id,
title: action.title,
items: action.items || []
}
]
That ...state is expanding whatever existing array there is into the new array that you're returning, and it doesn't sound like that's the behavior you actually want. My first guess is that when you create a new list, you probably want to just return the one new item inside, not the entire old list contents plus that new item.
Some of your other immutable-style update code also looks sort of complex. I know that "update a thing in the middle of an array" isn't always easy to deal with. You might want to take a look at this SO post on updating immutable data, which lists several ways to approach it. I also have a links repo that catalogs Redux-related libraries, and it has a list of immutable data management libraries that might make things easier for you.

Though #markerikson 's tip was part of the issue i was having, it didn't solve it completely. I had to fix my mapStateToProps to this
function mapStateToProps(state, props) {
return {
lists: state.lists,
listItems: props.list.items.map(id => state.items[
state.items.findIndex(item => item.id === id)
]).filter(item => item)
}
}
and remove the connect from previous implementation for the items alone in my Items.jsx