- 导入依赖
yarn add redux react-redux redux-thunk @reduxjs/toolkit
这是目录,为以下创建作为参考
- 新建reducer文件 counterReducer.js
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;
- 新建 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} /> </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()); }; 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> ); }