This is the sixth day of my participation in the August More text Challenge. For details, see: August More Text Challenge

An overview of the

Using the Redux ToolKit simplifies the process and amount of code that traditional Redux creates; The createReducer and createSlice hook functions make it easier to get global CRDU status, and thunk is configured by default in the middleware.

Install basic dependency packages

yarn add  @reduxjs/toolkit react-redux redux-logger
Copy the code

store

Reference: / / https://redux-toolkit.js.org/api/configureStore
import { configureStore } from '@reduxjs/toolkit';
import logger from 'redux-logger';
import userReducer from '@src/redux/reducer/users';
import { counterReducer } from './reducer/reducerStandard';

export const store = configureStore({
  reducer: {
    user: userReducer,
    counter:counterReducer
  },
  middleware: (getDefaultMiddleware) = > getDefaultMiddleware().concat(logger)
});

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>;
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch;

Copy the code

hooks

import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
import type { RootState, AppDispatch } from '@src/redux/store'

// Use throughout your app instead of plain `useDispatch` and `useSelector`
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
export const useAppDispatch = () = > useDispatch<AppDispatch>()

Copy the code

reducer

/** * Initiate API request */
import { createAsyncThunk, createSlice, createAction, PayloadAction } from '@reduxjs/toolkit';
import { httpsTest } from '@src/api';

export interface User {
  value: number;
  message: any;
}
export interface Params {
  value: number;
  key: string;
}

const initialState: User = {
  value: 0.message: 'asd'
};

/ / define the action
const httpTest = createAction('httpTest');

// First, create the thunk
export const fetchUserById = createAsyncThunk('httpTest'.async() = > {const response = httpsTest();
  return response;
});

// Then, handle actions in your reducers:
const usersSlice = createSlice({
  name: 'users',
  initialState,
  reducers: {
    increment: (state) = > {
      state.value += 1;
    },
    decrement: (state) = > {
      state.value -= 1;
    },
    incrementByAmount: (state, action: PayloadAction<Params>) = >{ state.value += action.payload.value; }},/ / HTTP requests
  extraReducers: (builder) = > {
    builder.addCase(fetchUserById.fulfilled, (state, action: any) = >{ state.message = action.payload.message; }); }});export const { increment, decrement, incrementByAmount } = usersSlice.actions;

export default usersSlice.reducer;

Copy the code

App. Js entrance

// import 'react-native-gesture-handler'; // React Navigation
import * as React from 'react';
import { Provider } from 'react-redux';
import Home from '@src/pages/index';
import HomeClass from '@pages/class';
import { store } from '@src/redux/store';
// Render the app container component with the provider around it
export default function App() {
  return (
    <Provider store={store}>
      <Home />{/ *<HomeClass />* /}</Provider>
  );
}

Copy the code

usage

import * as React from 'react'; import { Text, View, StyleSheet, Button } from 'react-native'; import { RootState } from '@src/redux/store'; import { fetchUserById, increment, incrementByAmount } from '@src/redux/reducer/users'; import { useAppDispatch, useAppSelector } from '@src/redux/hooks'; interface AppProps {} const App = (props: AppProps) => { const count = useAppSelector((state: RootState) => state.user.value); const countStandard = useAppSelector((state: RootState) => state.counter.value); const dispatch = useAppDispatch(); Return (<View style={styles. Container}> <Text>{count}</Text> <Button title=" Button "onPress={() => { dispatch(incrementByAmount({ value: 1, key: 'sadf' })); }} /> <View style={{ marginTop: 10 }}> <Button title="createAsyncThunk" onPress={() => { dispatch(fetchUserById()); }} /> </View> <View style={{ marginTop: 10 }}> <Button title="createReducer" onPress={() => { dispatch(add()); }} /> </View> </View> ); }; export default App; const styles = StyleSheet.create({ container: {} });Copy the code

reference

Official document of the Redux Toolkit