State management using Redux in React native
In JavaScript applications Redux act as a predictable state container. It it like state management library.
If we want to get the state of our application throughout the app then we need to initialise the redux in application context,
since the scope is throughout application.
In my shopping app below, i used redux for getting the state of my user which i store in the Redux store.
Redux comes with Actions,Reducers and Store.
Actions: send data from your application to your store. They are the only source of information for the store.Meaning if any state change necessary the change required will be dispatched through the actions.
Reducers: when an action is dispatched for state change its the reducers duty is to make the necessary changes to the state and return the new state of the application.
Store: With help of reducers a store can be created which holds the entire state of the application.It is recommended to use a single store for the entire application than having multiple stores which will violate the use of redux.
After installing the redux and react-redux library in your app using the following command.
npm install redux react-redux — save
You are ready to use Redux.In my app i use app.js to initialise the store with the help of Provider from react-redux.
like this
<Provider store={store}>
<App />
</Provider>
Inside the store i have for example ,my reducers for cart items which gets updated when state change,it is a function that takes the previous state and an action, and returns the next state like this
Store.js
const reducers = combineReducers({
cartitems: cartitems
})
const store = createStore(
reducers,
composeWithDevTools(applyMiddleware(thunkMiddleware))
)
next we create action for the cart operations, which is mapped with our reducers (created above)
so in the action.js the code will be like this
Action.js
export const addItemToCart = (payload) => {
return {
type: ADD_TO_CART,
payload
}
}
export const removeItemsFromCart = (payload) => {
return {
type: REMOVE_FROM_CART,
payload
}
}
export const clearCart = () => {
return {
type: CLEAR_CART
}
our reducer code for the cart reducer will be
Cartreducer.js
const cartItems = (state = [], action) => {
switch (action.type) {
case ADD_TO_CART:
return […state, action.payload]
case REMOVE_FROM_CART:
return state.filter(cartItem => cartItem !== action.payload)
case CLEAR_CART:
return state = []
}
return state;
}
till now the flow is actions -> reducers -> store -> Providers.
Now we will see what happend when User press the Add button on any product and how it is getting added in cart.
After pressing the Add button onPress gets called,onPress() needs to be mapped with particular prop e.g for adding product props.addItemToCart(props)
The above event is dispatched using dispatch() inside mapDispatchToProps()
const mapDispatchToProps = (dispatch) => {
return {
addItemToCart: (product) =>
dispatch(actions.addToCart({quantity: 1, product}))
}
}
The reducer will receives the event call, updates the state in store.
Once the store get updated with cartitems then it proceed for checkout by calling connect() and passing the mapStateToProps() like this
const mapStateToProps = (state) => {
const { cartItems } = state;
return {
cartItems: cartItems,
}
}
export default connect(mapStateToProps)(Checkout)
Note: mapStateToProps() notifies the UI, regarding any changes in state of the store. The connect() function connects a React component to a Redux store.
