I will create a todo-list with redux. Go to terminal, and go to directory to store your app in and type npx create-react-app <app name>, and create a redux folder inside the src folder.

npx create-react-app todo-list-example
cd todo-list-example
cd src
mkdir redux

If you feel like you don’t understand redux look at me past article describing the difference between passing state from parent component to child component, and passing state within the store so any component that is child of the root component can access it.

Now let’s open the file with our text editor, I will be using atom, but any text editor will do. Get out of our src folder, and go to root of app and install react-redux and redux via yarn or npm install.

cd ..
yarn add react-redux redux OR npm i --save react-redux redux
atom .

Now let’s create our reducer in our reducer.js file. We will define our initial state, action types and our reducer that takes a state, and action.

//This is our initial state with our list with dummy data. 
const initialState = {
list: [ 'apples', 'bananas', 'oranges', 'pears' ]
};

This is our reducer using es6 syntax.

const reducer = (state=initialState, action) => {
let copyList = [];
switch(action.type) {
case ADD_TO_LIST:
//Remember when altering data in redux, make sure to treat data as immutable,
//Not changing existing data, instead assigning new data.
//Assign a copy of the array created via .slice() method.
copyList = state.list.slice();
// //Add another element to the array.
copyList.push(action.payload);
//Best to use console.logs to understand what your application is doing.
console.log('------------copyofList', copyList);
//Use spread operator with an object to assign a new array to array list property in state.
return {...state, list: copyList};
//
case REMOVE_FROM_LIST:
// //Copy the array
copyList = state.list.slice();
// //Removes last element of the array.
copyList.pop();
//Then return the state, with the list property assigned to a new array.
return {...state, list: copyList};
//Make sure in your default case to return the state, if not it will return undefined.
default:
return state;
}
}

Now let’s define our action creators using es6 syntax, but can use es5 it wont make a difference since we are just exporting a function.

Here we are creating action creators

//This the action creator that adds a new item to the list.export function addToList(payload) {
//Return the type of action is required, and optionally return a payload in which the reducer takes and manipulates the data.
return {
type: ADD_TO_LIST,
payload
};
}
//This action creator returns a action type to remove last item of the list.export function removeFromList() {
return {
type: REMOVE_FROM_LIST
};
}

Now lets create our store using the createStore function from redux. First we will need to import it, and the reducer, then export the store to be used for the provider.

import { createStore } from redux;import reducer from './listReducers';

Can export just createStore with reducer and redux devtools or assign it to a variable.

const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
console.log('----------------store', store);
export default store;

OR

export default createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

Now let’s connect it with our components. Let’s use Provider hoc(higher order component) that wraps our root component with the store or connects it to the store.

Make sure to import the Provider from react-redux and the store from your store.js file.

import { Provider } from 'react-redux';
import store from './redux/store';

Now lets wrap our root component with the Provider component.

ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));

Now lets create a components Folder and create a TodoList.js file with our todo list.

mkdir components
cd components
touch TodoList.js

This component will be a class. Import the connect from react-redux to connect component to store.

import { connect } from 'react-redux'

Then define your es6 TodoList class

//Don't forget to import React
import React, {Component} from 'react';
import { connect } from 'react-redux';class TodoList extends Component {
constructor() {
super();
this.state = {
text: ''
}
}
render() {
return (
<div>
<ul class='unordered-list'>
{this.props.list.map((item, i) => <li key={i}>{item}</li>)}
</ul>
</div>
);
}
}

Now we are rendering the list. Next we will map the state needed from our initialState in our reducer.js file to the component.

const mapStateToProps = state => {
return state;
}

Next connect the component to redux

export default connect(mapStateToProps)(TodoList);

Since we are done with our child component now we will start structuring our root component or our App component.

First import React, and Component named export, and then import the action creators that will add and remove items in the list.

import React, {Component} from 'react';
import { addToList, removeFromList } from './redux/reducers/listReducer';

Next import connect a named export to connect the component to react-redux.

import { connect } from 'react-redux';

Then import the TodoList component that we created earlier.

import TodoList from ‘./components/TodoList’;

One of the only cases when I would recommend having state in a application is when dealing with changes in input, because their would be a short period of time where redux has to retrieve the new value every time the input changes, but when managed in the component that time is a non-factor.

Now define the constructor with our input state.

constructor() {
super();
this.state = {
text: ''
}
//No need to bind since it is not being passed down.
}

Next define a function that will handle the changes in the inputs triggered by keypresses.

//Handles input changes.
handleChange(val) {
this.setState({text: val});
}

Then define the render method of the App Component.

render() {
console.log(this.state.text);
console.log(‘ — — — — — — — -this.props’, this.props)
console.log(‘ — — — — — — — -this.props list’, this.props.list)
return (
<div className=”App”>
<div>
<TodoList />
<input type=’text’ value={this.state.text} onChange={e => this.handleChange(e.target.value)}/>
<button onClick={() => this.props.addToList(this.state.text)}>Add To List</button>
<button onClick={() => this.props.removeFromList()}>Remove From List</button>
</div>
</div>
);
}

Define the mapStateToProps and mapDispatchToProps that will map the state and dispatcher to the props of the component.

//Map the state to the props.
const mapStateToProps = state => {
return state;
}
//Map the dispatchers or action creators to props.
const mapDispatchToProps = {
addToList,
removeFromList
}

If you felt like this help clap, if not comment I would love answer any questions you might have. For more resources use redux documentation.

https://redux.js.org/introduction

Also connect with the developer community, and solve issues on your own based on other developer answers, register for stack overflow.

https://stackoverflow.com/users/login-add?ssrc=login