【React Native教程】Redux入门教程

{
	prop1: value1,
	prop2: value2,
}

{
	type: 'EXAMPLE_ACTION',
	payload: 'args'
}

function rootReducer(state = initialState, action) {
  if (action.type === 'FIRST_ACTION') {
    return Object.assign({}, state, {
      props: newValue
    });
  }
  return state;
}

const mySlice = createSlice({
	name: "sliceName",
	initialState: {
	    prop1: "",
	    prop2: false,
	},
	reducers: {
	    action1: (state, action) => {
	        console.debug('action1 done'+action.type);
	    },
	    action2: (state) => {
	        state.prop1 = "123";
	        state.prop2 = true;
	    },
	},
});

const { action1, action2 } = authSlice.actions;
const myReducer = mySlice.reducer;

export const doLogin = createAsyncThunk(
    'user/login',
    async ({username, password, code}) => {
        return await API.fetchData({
            path: 'doLogin',
            params: {
                code: code,
                password: AESTool.encrypt(password),
                userName: username,
            }
        });
    },
    {
        condition: ({username, password, code}) => {
            if (checkStringEmpty(username)) {
                HUD.show("请输入用户名！");
                return false;
            } else if (checkStringEmpty(password)) {
                HUD.show("请输入密码！");
                return false;
            } else if (checkStringEmpty(code)) {
                HUD.show("请输入验证码！");
                return false;
            }
            return true;
        },
        dispatchConditionRejection: true
    }
)

extraReducers: {
    [ doLogin.pending ]: () => {
        Loading.show();
    },
    [ doLogin.fulfilled ]: (state, action) => {
        Loading.hidden();
        console.debug(action.payload)
    },
    [ doLogin.rejected ]: (state, action) => {
        Loading.hidden();
        console.warn(action.error);
    },
}

const middleware = [
    ...getDefaultMiddleware(),
    CustomMiddleWare,
];

export const store = configureStore({
    reducer: {
        auth: authReducer,
        common: commonReducer
    },
    middleware,
});

<Provider store={store}>
    <StatusBar barStyle={'light-content'}/>
    <App/>
</Provider>

# NPM
npm install @reduxjs/toolkit

# Yarn
yarn add @reduxjs/toolkit

# NPM
npm install redux

# Yarn
yarn add redux

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

const countSlice = createSlice({
    name: "count",
    initialState: {
        value: 0
    },
    reducers: {
        incrementAction: (state, action) => {
            state.value += action.payload;
        },
        decrementAction: (state, action) => {
            state.value -= action.payload;
        },
    },
});

export const {incrementAction, decrementAction } = countSlice.actions;

export const countReducer = countSlice.reducer;

import {configureStore, createSlice, getDefaultMiddleware} from "@reduxjs/toolkit";
import {countReducer} from './slices/CountSlice'

const middleware = [
    ...getDefaultMiddleware(),
];

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

AppRegistry.registerComponent(appName, () => ProviderContainer);

const ProviderContainer = () => {
    return (
        <Provider store={store}>
            <App/>
        </Provider>
    );
}