Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

July 27, 2022 05:04 am GMT

How to add Redux Toolkit into React Native

In this post I wanna share how to add Redux Toolkit into an existing React Native project.

Redux Toolkit is available as a package. Just open your project folder with terminal and use below commands:

If you are using NPM:

# NPMnpm install @reduxjs/toolkit

or YARN:

# Yarnyarn add @reduxjs/toolkit

Now, inside your project folder create a folder named redux which will have a file called store.js:

This is how I created the folder structure. This isn't a convention or anything. It is just my preference.

Inside store.js write the following:

import {configureStore} from '@reduxjs/toolkit';export const store = configureStore({  reducer: {},});

We also need to create a folder for our redux slices. slices folder will hold your redux toolkit reducers.

For the sake of this post I created a sample userSlice reducer which sets an id of a user.

import {createSlice} from '@reduxjs/toolkit';const initialState = {  id: null,};// Setting up user slice (redux-toolkit)// All the magic happens here, lol.export const userSlice = createSlice({  name: 'user',  initialState,  // The `reducers` field lets us define reducers and generate associated actions  reducers: {    setUserId: (state, action) => {      state.id = action.payload;    },  },});export const {setUserId} = userSlice.actions;// The function below is called a selector and allows us to select a value from// the stateSelectors can also be defined inline where they're used instead of// in the slice file. For example: `useSelector((state: RootState) => state.counter./// value)`export const selectUser = state => state.user;export default userSlice.reducer;

Now, we need to import and add the userSlice to the redux store which is inside store.js file:

import {configureStore} from '@reduxjs/toolkit';import userSlice from './slices/userSlice';export const store = configureStore({  reducer: {    user: userSlice,  },});

Redux store is done . Let's add this store to our app, shall we? But before that we need to add react-redux library to be able to use redux inside our React Native app.

# If you use npm:npm install react-redux# Or if you use Yarn:yarn add react-redux

After installing react-redux, we need to link our redux store to our React Native. For that you have to add the following code to your App.js file:

import * as React from 'react';import {Text, SafeAreaView} from 'react-native';import {Provider} from 'react-redux';import {store} from './utils/redux/store';function App() {  return (    <Provider store={store}>      <SafeAreaView>        <Text>Hello World</Text>      </SafeAreaView>    </Provider>  );}export default App;

Congratulations ! You have successfully linked the redux store to your React Native app .

Now, you can read more about how to use your reducer (or slice in redux-toolkit) at the Redux Toolkit docs which I will leave a link.

Redux Toolkit Quick Start link

Thanks for reading! If you have any questions leave in the comments.

Original Link: https://dev.to/nomanoff_tech/how-to-add-redux-toolkit-into-react-native-5aki

Share this article:

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To