一个简单的 bug 列表使用 redux 的 store 管理示例
reducer.js
//初始化一个ID
let lastId = 0
//定义方法
function reducer(state = [], action) {
switch (action.type) {
case "add":
return [
...state,
{
id: ++lastId,
description: action.payload.description,
resloved: false
}
]
case 'remove':
return state.filter(bug => bug.id !== action.payload.id)
default:
return state
}
}
store.js
import { createStore } from 'redux';
import reducer from './reducer';
const store = createStore(reducer)
export default store;
index.js
import store from './store';
//订阅store变化
const unsubscribe = store.subscribe(() => {
console.log('Store changed!', store.getState())
})
//调用reducer中定义的添加方法
store.dispatch({
type: 'add',
payload: {
description: 'bug1'
}
});
//取消订阅,页面不可见时调用
unsubscribe()
//调用reducer中定义的删除方法
store.dispatch({
type: 'remove',
payload: {
id: 1
}
})
console.log(store.getState())