First app with React/Redux

I a lot of time read tutorials about React/Redux. I wrote in previous article, how I learnt React. React without Redux is easy to understand. For me this Redux tutorial about Todos was better than others. But only after 2 weeks I understood it.

I created first my React/Redux app — Simple Todo like the Redux example. Now we can watch my app.

Firstly need install Node, React, Redux, React dom and etc..

Actions

Actions send data from your application to store. What is application? Application is your JSX code (HTML, functions and etc.). If you think about your first React/Redux app — you need think about your application actions. What will do your appliaction?

My app have two actions: ADD_TASK and REMOVE_TASK. Actions are constants. I defined constants into constants/index.js

My app can add task (ADD_TASK) and remove added task (REMOVE TASK).

If we have actions, then in this file we have to create Action creators. Action creators are functions who return an action data.

let nextId = 0 
export const addTask = 
    (text) => { 
        return { 
           type: ADD_TASK, 
           id: nextId++, 
           text 
     }}

id — all tasks have unique id. When I firstly add a task id gets 1.
type — there is task name.
text — a task title I will get from application. How I will get? I will get when I call this action (addTask). In ES6 I can write text, but in old syntax have to write — text: text.

removeTask have these data: type and id. Why for me need id? When I click a “delete” icon I will send task id.

Perhaps you think — what data I have to write in the actions? After click a button “add task” your app will restart and what you want to get? You want that a new task from text field appear into tasks list. So… You have to catch new task and it send to store (text). Because after restart the app will take all tasks from store.

Reducers

Actions tell fact that someting happened. Reducers specify how the app state changes.

There is one a function tasks. And it works with all my tasks. Reducers get data from actions and send to store. But firstly reducers process the data. For example if I added a new task, reducer have to send new task with all old tasks to store. But Redux documentation doesn’t allow mutate the state. Need to create object copy. So, we can do it with object spread operator. Default is previous state. When we start the app firstly — both actions aren’t fired, then the reducer returns default state.

If we have a few reducers we can combine its into single object. But now I can get id from state: state.tasks.id (but not state.id, because we combined tasks).

Store

Store brings reducers with actions together. For one app we have to create only one store.

Store is simple function.

Components

Components present HTML code.

There is one important thing — dispatch. The dispatch allow to update an app state. When we want to send data to store on app action (clicked element or etc…) — we have to call dispatch with one of the action creator parammeter.

dispatch(removeTask(id))

We called the removeTask action creator. In this action we sent id.

From state we have to send data to props. Function connect will help for you.

const mapStateToProps = state => { 
    return { 
        tasks: state.tasks 
}} 
const VisibleTaskList = connect( mapStateToProps)(TaskList)
export default VisibleTaskList

So, TaskList got tasks object from state.tasks

Containers

Containers have logic and insert components.

My first app: https://github.com/audriuiv/simpleTodo/tree/master/source .

Sorry for my mistakes, I’m React/Redux student.