来一段redux使用案例代码
以下是一个简单的计数器应用程序的Redux使用案例代码:
import { createStore } from 'redux';
// 定义初始状态
const initialState = {
count: 0
};
// 定义reducer函数
function counterReducer(state = initialState, action) {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
case 'DECREMENT':
return { count: state.count - 1 };
default:
return state;
}
}
// 创建store
const store = createStore(counterReducer);
// 订阅store的状态变化
store.subscribe(() => {
console.log(store.getState());
});
// 分发action
store.dispatch({ type: 'INCREMENT' }); // { count: 1 }
store.dispatch({ type: 'INCREMENT' }); // { count: 2 }
store.dispatch({ type: 'DECREMENT' }); // { count: 1 }
在上面的代码中,我们首先使用createStore函数创建了一个Redux store,并定义了一个初始状态initialState和一个reducer函数counterReducer。counterReducer接受一个状态和一个action作为参数,并根据action的类型返回一个新的状态。
接下来,我们订阅了store的状态变化,每当store的状态发生变化时,我们都会在控制台打印出来。最后,我们分发了三个action:INCREMENT、INCREMENT和DECREMENT,分别增加和减少了计数器的值。每次分发action后,我们都会在控制台看到新的状态。
这只是一个简单的例子,但它演示了Redux的核心概念和API。通过定义初始状态和reducer函数来管理应用程序的状态,通过分发action来更新状态,并通过订阅store的状态变化来响应状态的变化。
原文地址: http://www.cveoy.top/t/topic/dvE6 著作权归作者所有。请勿转载和采集!