Installing Redux in a React Native App(Expo Based)
What is Redux?
Redux is a predictable state container for JavaScript apps. It is tiny (only 2kB), but has lots of addons in its ecosystem.
Installation
//Redux Toolkit
npm install @reduxjs/toolkit// Redux
npm install redux redux-thunk react-redux
The file structure of Redux
We need to create a store that is in a directory where the src folder is located. Also, we need to create actions and slices folders and index.js file inside of the store folder just created. So, our file structure must be shown below.
src/
store/
actions/
slices/
index.jsCreating First Slice
To manage the state of UI(User Interface), we need to create a file in the slices folder. And the file will be shown below.
Understanding the code above
createSlice function takes those parameters
- initialState: The initial state value of the slice
- name: The name of the slice
- reducers: To manage our state, we can create some functions for it. And these functions take to parameters which are state and action. With the state parameter, we can read and update our state. With the action parameter, we can access parameters that are sent to this reducer function.
Creating The Slice
To access our slices in our app, we need to create a store with redux. Our store will be located in store/index.js
Understanding the code above
We need to use the combineReducers to combine our slices’ reducers because we will create new slices in the future.
To configure the store we need to send our reducer, we need to use the configureStore function. And we need to export it.
Wrapping The App With Redux
To access the store we need to wrap our App.js with Provider from react-redux and import our store from the store folder. After changing the App.js file. Then we can access slices in the entire app.
