react native 使用 redux、react-redux、redux-thunk、@reduxjs/toolkit 无脑版
- 导入依赖
yarn add redux react-redux redux-thunk @reduxjs/toolkit
这是目录,为以下创建作为参考
- 新建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;
- 新建 reducer.js(对应上图的index.js)
import { combineReducers } from 'redux'; import counterReducer from './counterReducer'; // 其他reducer const rootReducer = combineReducers({ counter: counterReducer, // 其他reducer }); export default rootReducer;
- 新建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;
- 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);
- 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;
- *最后别忘了用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> ); }