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:
# NPM
npm install @reduxjs/toolkit
or YARN:
# Yarn
yarn 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.
Top comments (0)