What is redux
Redux is a state management library for React. In simple words, it is a store that stores the global state of the application.
React provides in-built support for managing the state of a component. It is okay to use the in-built support if the application is small. But with larger and complicated applications that have several components and state is required to be shared among them, we need something powerful like redux.
For react native there is two way you can use redux , first one is older way second one is redux tool kit
Lets understand redux toolkit
Redux toolkit is recommended and a new redux library for using react native.
Store
Action
Slice
Store is an object which provides the state of the application. This object is accessible with help of the provider in the files of the project. The only way to change the state inside it is to dispatch an action on it. There are three important parts of the store: createStore(): To create a store object in redux
Actions are plain JavaScript objects that contain information. Action is one of the building blocks of Redux. Redux is a state managing library used in JavaScript apps. It is used to manage the data and the state of the application. Uses of Redux: With the help of redux it is easy to manage state and data.
Slice is a collection of Redux reducer logic and actions for a single feature in your app, typically defined together in a single file. The name comes from splitting up the root Redux state object into multiple "slices" of state.
First install the library
Create store
Create action
Create slice
Combine slice into store
Wrap entry file with provide store
We will understand redux with a example
npm install @reduxjs/toolkit
OR
yarn add @reduxjs/toolkit
Create store
import { configureStore } from '@reduxjs/toolkit'
export const store = configureStore({
reducer: {},
})
Wrap the entry file
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import { store } from './app/store'
import { Provider } from 'react-redux'
ReactDOM.render(
,
document.getElementById('root')
)
Create slice
import { createSlice } from '@reduxjs/toolkit'
const initialState = {
value: 0,
}
export const counterSlice = createSlice({
name: 'counter',
initialState,
reducers: {
increment: (state) => {
// Redux Toolkit allows us to write "mutating" logic in reducers. It
// doesn't actually mutate the state because it uses the Immer library,
// which detects changes to a "draft state" and produces a brand new
// immutable state based off those changes
state.value += 1
},
decrement: (state) => {
state.value -= 1
},
incrementByAmount: (state, action) => {
state.value += action.payload
},
},
})
// Action creators are generated for each case reducer function
export const { increment, decrement, incrementByAmount } = counterSlice.actions
export default counterSlice.reducer
Wrap the slice into store
import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '../features/counter/counterSlice'
export const store = configureStore({
reducer: {
counter: counterReducer,
},
})
After that use the usedispatch for sent the data and use the use selector for get the data
Do you have interesting project in your mind, Let's discuss with us and hire dedicated react native developers as per your need.
Top comments (0)