Counter sample app.

Minimal React-Native sample app using redux and react-redux.

Most of the samples/ tutorials started from explanation of redux basic concept and then implement the app with react-redux bindings.

However, In my experience, there's difficulty jumping to react-redux bindings just after learned basic concept of redux. react-redux's sophisticated APIs might not be easy to understand for beginners.

In this repository, you can see how the counter app can be improved by redux and react-redux, and redux-thunk step by step.

Minimal prerequisite

React Native

• React-Native quick start

• React-Native learn the basics

Redux

• Redux Core Concepts

• Redux Principles

• Part of Redux basics

  Pleases read the following sections.

  • Actions
  • Reducers
  • Store
  • Data Flow

  I feel difficulty when reading the section Usage with React and Example: Todo List and that's why I created this repository.

  If you don't feel difficulty when reading those 2 section, then you may not need this repository. Envy you. Go ahead and try more sophiscated samples or just start your production app!

  If you feel difficulty, hope following guides helps.

1. Counter app without redux.

You can check the code from the tag react0.

Yay!, might be clear and nothing complex.

2. Counter app with redux, withour react-redux.

You can check the code from the tag redux0.

Redux can be implemented without react-redux.

It might be easier to understand.

Everything is in App.js.

• reducer function

• Calling createStore and with the argument reducer and initial state.

• dispatch the action from the view event.

That's it! Actually, basic concept of Redux is very simple.

In react-redux binding, Mapping the React Component state and Redux store state and dispatching actions can be done in more sophisticated way. mapping code

3. Counter app with redux and react-redux.

You can check the code from the tag react-redux0.

We'll see how react-redux works here.

From this step, App.js is divided into App.js and CounterApp.js

In App.js, Provider is defined as a root component.

Provider allows child components such as CounterApp to access to Redux store thorough connect interface. You just need to create the Redux store as shown in section 2 and pass it to Provider constructor and define a child components. That is all you need to know about the Provider and the rest is done by magical connect interface.

This part is dealing with the connect interface.

• mapStateToProps defines mapping between the Component's state and Redux store.

• mapDispatchToProps defines function that can dispatch action and map it to Component's state.

Mapped properties are used here.

this.props now has count and actions.

connect makes the "connected" version of ConfigApp class end export it.

By the (hidden) magic of Provider and connect interface, count and actions are injected.

Provider references the ConfigApp class generated by connect interface here.

That is why there's no export in ConfigApp class declaration. (Note: If you export it and import from App.js with improt { ConfigApp } app from './ConfigApp', react-redux binding no longer works.)

Hope that helps to understand how the react-redux bindings work!

4. Counter app with redux, react-redux and redux-thunk.

You can check the code from the tag react-redux-async.

Let's see how we deal with the async operation with redux-thunk and applyMiddleWare.

1. Inject redux-thunk as middleware when calling createStore

2. Define async increment

3. Add async increment to mapDispatchToProps

In step 3, you may notice that incrementAsync returns function instead of pure javascript action object.

Redux store expect the function that returns the function which takes Redux store dispatch function as an argument when we utilize middleware.

Further steps

File structure.

In this sample, file structures are not aligned with (de fact) standards. I intentionally minimize the number of files to focus on understanding the interaction between the react, redux and react-redux.

Dividing files and place it in proper directory such as components, actions, reducers, containers, etc is good in production level development.

Presentation and Container

Many samples divide the UI component into Presentation and Container. I decided not to include it in this sample to keep it simple and focus on redux and react-redux.

The concept is explaned here

It is good to follow the practice in production level development.

Using different middleware, Chaining middleware

In this sample, I only use redux-thunk.

There's some examples and explanation of middleware chain in Redux API Reference