Как добавить Redux Toolkit в React Native

В этой статье я хочу рассказать о том, как добавить Redux Toolkit в существующий проект React Native.

Redux Toolkit доступен в виде пакета. Просто откройте папку вашего проекта в терминале и используйте приведенные ниже команды:

Если вы используете NPM:

# NPM
npm install @reduxjs/toolkit

Войдите в полноэкранный режим Выйти из полноэкранного режима

или YARN:

# Yarn
yarn add @reduxjs/toolkit

Войти в полноэкранный режим Выйдите из полноэкранного режима

Теперь в папке проекта создайте папку redux, в которой будет находиться файл store.js:

Вот как я создал структуру папок. Это не конвенция или что-то в этом роде. Это просто мое предпочтение.

Внутри store.js напишите следующее:

import {configureStore} from '@reduxjs/toolkit';

export const store = configureStore({
  reducer: {},
});

Войти в полноэкранный режим Выйти из полноэкранного режима

Нам также нужно создать папку для наших redux slices. В папке slices будут храниться ваши редукторы набора инструментов redux.

Для данного поста я создал пример редуктора userSlice, который устанавливает id пользователя.

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;

Вход в полноэкранный режим Выход из полноэкранного режима

Теперь нам нужно импортировать и добавить userSlice в магазин redux, который находится внутри файла store.js:

import {configureStore} from '@reduxjs/toolkit';
import userSlice from './slices/userSlice';

export const store = configureStore({
  reducer: {
    user: userSlice,
  },
});

Вход в полноэкранный режим Выйти из полноэкранного режима

Магазин Redux готов ✅. Давайте добавим этот магазин в наше приложение, не так ли? Но перед этим нам нужно добавить библиотеку react-redux, чтобы иметь возможность использовать redux внутри нашего приложения React Native.

# If you use npm:
npm install react-redux

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

Вход в полноэкранный режим Выход из полноэкранного режима

После установки react-redux нам нужно связать наш магазин redux с нашим React Native. Для этого необходимо добавить следующий код в файл App.js:

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;

Войти в полноэкранный режим Выйти из полноэкранного режима

Поздравляем 👏! Вы успешно связали магазин redux с вашим приложением React Native 🔥.

Теперь вы можете прочитать больше о том, как использовать ваш reducer (или slice в redux-toolkit) в документации Redux Toolkit, ссылку на которую я оставлю.

Ссылка на краткое руководство по Redux Toolkit

Спасибо за прочтение! Если у вас есть вопросы, оставляйте их в комментариях.