我已经能够为计数器应用程序设置基本的react redux,但由于一些问题(没有警告,没有错误),我无法读取组件中的默认计数器状态。
验证码:
const initialState = {counter:0}
const incrementReducer = (state = initialState, action)=> {
const {type, payload} = action;
if (type == 'INCREMENT') {
return {...state, counter:state.counter + 1 };
}
return state;
}
const decrementReducer = (state = initialState, action)=> {
const {type, payload} = action;
if (type == 'DECREMENT') {
return {...state, counter:state.counter - 1 };
}
return state;
}
const rootReducer = combineReducers({incrementReducer, decrementReducer});
const store = createStore(rootReducer);
// const store = createStore(incrementReducer);
function Counter() {
const dispatch = useDispatch();
const counter = useSelector((state) => state.counter);
console.log({counter});
return (
<View style={styles.container}>
<TouchableOpacity onPress={ () => dispatch({'type':'INCREMENT'})}>
<Text style={styles.paragraph}>
{counter}
</Text>
</TouchableOpacity>
</View>
);
}
export default function App() {
return (
<Provider store = {store}>
<Counter/>
</Provider>
);
}
下面是运行它的代码的链接:https://snack.expo.dev/@iosdose/react-redux-counter
1条答案
按热度按时间u4vypkhs1#
你编码
让你最终得到一个形状为
正如你所看到的,把它分成两个reducer是没有任何意义的,因为一个值只能上升,另一个值只能下降。
一般来说,你在这里遵循的是一种非常过时的Redux风格,所以我强烈建议你遵循the official Redux tutorial来学习现代的Redux。
Modern Redux(自2019年起)不使用switch..case reducers,ACTION_TYPES,不可变更新逻辑,
createStore/combineReducers
等。它的代码更少,更容易阅读和编写。你可以看到一个非常简短的现代Redux here介绍,但我真的建议你使用上面的教程。我还建议你先在一个普通的React应用程序中遵循这一点,而不是使用React native,因为你可以在那里使用Redux devtools浏览器扩展。