ReactNativeRedux

An example about using Redux in React Native

YOUTUBE VIDEO:

PART 1 (Basics): https://www.youtube.com/watch?v=VwrJTgr2UCU

PART 2 (Combine reducers): https://www.youtube.com/watch?v=WGRE0csevfE

PART 3 (Redux thunk): https://www.youtube.com/watch?v=QKVYP7PQ_pI

DEMO

Benefits of using Redux

- Avoid pass data multiple levels (React/ React native passes props from parent component to its child components
=> maybe some child components don't need the passing data, but it contains a component that needs this data) => data is useless in some components
- Redux makes it's easy to test (actions tell us what is happening) => traditional state in every components makes us crazy when something wrong but we don't know where it happened

THREE OBJECTS IN REDUX: STORE, REDUCER AND ACTION

1. Step 1:

Install modules: redux, react-redux

npm i --save redux react-redux

2. Step 2:

Create a simple store => store is used to contain your app states (combines all components state)

3. Step 3:

Create a simple reducer => reducer is a pure function which returns new state based on an action (I will explain this in later steps). Reducer has 2 parameters:
- state: this is state of current reducer
- action: simple is a plain object contains some value, such as: type (often a string tell something about this action), payload (contains data),...
=> Because reducer is a pure function, we shouldn't change these parameters => this is a rule :)))
=> NOTE: reducer 'contains' state (we init this with 'initialState')

4. Step 4:

Connect REDUX to our app

5. Step 5:

Build REDUX FRAMEWORK => create folders: store, reducers, actions

6. Step 6:

Combine reducers

7. Step 7:

Use middleware redux-thunk => used for actions which don't return a plain object, such as fetch data from API

npm i --save redux-thunk

uit2712/ReactNativeRedux