我刚开始学习react-native,我也在做reduxjs/toolkit,我想做一个简单的练习来找出答案,我想做的是当我按下按钮时数字增加1,可惜我没能实现这个增加,我该怎么解决这个问题呢?
import React from "react";
import { View, Text, Button } from "react-native";
import { Provider, useDispatch, useSelector } from "react-redux";
import {
legacy_createStore,
createSlice,
createAction,
combineReducers
} from "@reduxjs/toolkit";
const incrementBy = createAction('incrementBy')
const counter = createSlice({
name: 'counter',
initialState: 0,
reducers: {
increment: (state) => state + 1,
multiply: {
reducer: (state, action) => state * action.payload,
prepare: (value) => ({ payload: value || 2 })
},
},
extraReducers: (builder) => {
builder.addCase(incrementBy, (state, action) => {
return state + action.payload;
})
},
})
const reducer = combineReducers({
counter: counter.reducer,
})
const store = legacy_createStore(reducer)
export default () => {
return (
<Provider store={store}>
<View style={{ flex: 1 }}>
<First />
<Second />
</View>
</Provider>
);
};
const First = () => {
const counter = store.getState().counter;
return (
<View style={{ flex: 1, backgroundColor: "black" }}>
<Text style={{ color: "white", fontSize: 40 }}>First : {counter}</Text>
</View>
);
};
const Second = () => {
const counter = useSelector(state => state.counter);
const dispatch = useDispatch();
return (`your text`
<View style={{ flex: 1 }}>
<Text style={{ fontSize: 40 }}>Second : {counter}</Text>
<Button title="+" onPress={() => dispatch(increment())} />
</View>
);
};
2条答案
按热度按时间8oomwypt1#
有几个问题。
首先,不应该将存储直接导入到任何组件文件中。
第二,你也不应该在组件中调用
store.getState()
,因为那并不订阅更新,你应该使用useSelector
,这是你在另一个组件中使用的。它 * 看起来 * 像
<Second>
组件 * 应该 * 重新渲染好。此外,虽然它与此问题没有直接关系:您*不应该 * 调用
legacy_createStore
-相反,您 * 应该 * 使用Redux Toolkit中的configureStore
方法。更多详情:
moiiocjp2#
你的回答已经足够了。谢谢。
我在这里包含的代码是为了给那些有同样问题的人提供一个例子。