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

1. 导入依赖

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

   

    这是目录，为以下创建作为参考

2. 新建reducer文件 counterReducer.js

   import { createSlice } from '@reduxjs/toolkit';
   
   // 定义函数来计算 initialState
   const calculateInitialState = (loopCount) => {
     let initialState = [];
     for (let i = 0; i < loopCount; i++) {
       initialState.push(i);
     }
     return initialState;
   };
   
   const counterSlice = createSlice({
     name: 'counter',
     initialState: {
       count: 0,
       data: calculateInitialState(5)
     },
     reducers: {
       //一个方法（递增）根据自身需求更改
       increment: (state) => {
         state.count += 1;
       },
       //一个方法（减 payload）根据自身需求更改
       decrement: (state, action) => {
         const { payload } = action;
         state.count -= payload;
       },
     },
   });
   //从 counterSlice.actions 中解构出 increment 和 decrement action creators，以便在应用程序中使用它们来分发相应的 action
   export const { increment, decrement } = counterSlice.actions;
   //返回 reducer供combineReducers组装
   export default counterSlice.reducer;

3. 新建 reducer.js(对应上图的index.js)

   import { combineReducers } from 'redux';
   import counterReducer from './counterReducer';
   // 其他reducer
   
   const rootReducer = combineReducers({
     counter: counterReducer,
     // 其他reducer
   });
   
   export default rootReducer;

4. 新建store.js

   import { configureStore } from '@reduxjs/toolkit';
   import rootReducer from './reducers';
   import thunkMiddleware from 'redux-thunk';
   
   const store = configureStore({
     reducer: rootReducer,
     // 其他配置选项
     middleware: [thunkMiddleware],
   });
   
   export default store;

5. js使用

   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(5)} />
           </View>
       );
   };
   
   export default connect(
       (state) => ({
           count: state.counter.count,
       }),
       {
           increment,
           decrement,
       }
   )(Test);

6. tsx使用

   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(5));
     };
     return (
       <View>
         <Text>Count: {count}</Text>
         <Button title="Increment" onPress={handleIncrement} />
         <Button title="Decrement" onPress={handleDecrement} />
       </View>
     );
   }
   
   export default Test;

7. *最后别忘了用Provider包起来不然会出现 ERROR Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>错误

   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>
     );
   }