What we are going to create :). I had used it create-react-app for generating the scaffold.

The user’s can add new todos, mark as completed, remove a todo, and filter todos. check the code or download it from https://github.com/nunosoares27/React_Redux_todoApp

In Redux applications we have only one source of truth , helping us to manage the state properly. When a user click on the application, it dispatches an action, that the reducer recipes and make the changes in the state. The states get's updated because the ui view had subscribed the store events.

First, we create the constants we are going to use on the actions creators, reducers, etc.

And now, the actions creators that are functions that create actions, very useful for example for making HTTP requests before sending the payloads to the reducers.

Then we create two reducers, one for managing the Todo state, and another for the filtering, and a third one for combining the other two reducers.

Then it's time to change the index. js file for connecting the react app to the Redux Store.

We use compose just for enabling the redux devTools Extension, and the Provider component from react-redux library is responsive to connect everything from react and redux.

Now let's change the App.js file, and we are going to create two container's component's, one to show the create a todo field and one for showing the table of results.

Then we created CreateTodo component

And the table component

The mapStateToProps is responsible for getting the state from the Redux Store and inject as Props to the React app. The mapDispatchToProps is responsible to dispatch the actions creators.

It's a really basic application, but you have learned some great concepts :).

Have fun, happy coding.