react native 使用 redux、react-redux、redux-thunk、@reduxjs/toolkit 无脑版

yarn add redux react-redux redux-thunk @reduxjs/toolkit

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

const counterSlice = createSlice({
  name: 'counter',//名字，用途如：state.counter.count
  initialState: {
    count: 0,
  },
  reducers: {
    //一个方法（递增）根据自身需求更改
    increment: (state) => {
      state.count += 1;
    },
    decrement: (state) => {
      state.count -= 1;
    },
  },
});
//从 counterSlice.actions 中解构出 increment 和 decrement action creators，以便在应用程序中使用它们来分发相应的 action
export const { increment, decrement } = counterSlice.actions;
//返回 reducer供combineReducers组装
export default counterSlice.reducer;

import { combineReducers } from 'redux';
import counterReducer from './counterReducer';
// 其他reducer

const rootReducer = combineReducers({
  counter: counterReducer,
  // 其他reducer
});

export default rootReducer;

import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducers';
import thunkMiddleware from 'redux-thunk';

const store = configureStore({
  reducer: rootReducer,
  // 其他配置选项
  middleware: [thunkMiddleware],
});

export default store;

import React from 'react';
import { View, Text, Button } from 'react-native';
import { connect } from 'react-redux';
import { decrement, increment } from './redux/reducers/counterReducer';

const Test = (props) => {
    return (
        <View>
            <Text>Count: {props.count}</Text>
            <Button title="Increment" onPress={props.increment} />
            <Button title="Decrement" onPress={props.decrement} />
        </View>
    );
};

export default connect(
    (state) => ({
        count: state.counter.count,
    }),
    {
        increment,
        decrement,
    }
)(Test);

import React from 'react';
import { View, Text, Button } from 'react-native';
import {useDispatch, useSelector } from 'react-redux';
import rootReducer from './redux/reducers';
import { decrement, increment } from './redux/reducers/counterReducer';

function Test(): JSX.Element {
  const count = useSelector((state: ReturnType<typeof rootReducer>) => state.counter.count);
  const dispatch = useDispatch();

  const handleIncrement = () => {
    dispatch(increment());
  };

  const handleDecrement = () => {
    dispatch(decrement());
  };
  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Increment" onPress={handleIncrement} />
      <Button title="Decrement" onPress={handleDecrement} />
    </View>
  );
}

export default Test;

import React from 'react';
import { Provider } from 'react-redux';
import store from './redux/store';
import Test from './Test';

export default Home = () => {
  return (
    <Provider store={store}>
        <Test/>
    </Provider>
  );
}