来一段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函数counterReducercounterReducer接受一个状态和一个action作为参数,并根据action的类型返回一个新的状态。

接下来,我们订阅了store的状态变化,每当store的状态发生变化时,我们都会在控制台打印出来。最后,我们分发了三个action:INCREMENT、INCREMENT和DECREMENT,分别增加和减少了计数器的值。每次分发action后,我们都会在控制台看到新的状态。

这只是一个简单的例子,但它演示了Redux的核心概念和API。通过定义初始状态和reducer函数来管理应用程序的状态,通过分发action来更新状态,并通过订阅store的状态变化来响应状态的变化。

来一段redux使用案例代码

原文地址: http://www.cveoy.top/t/topic/dvE6 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录