import {createStore, applyMiddleware } from 'redux'
import todoApp from './reducer/index'
import thunk from 'redux-thunk'
// let store = createStore(todoApp,
// window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())
let store = createStore(todoApp, applyMiddleware(thunk))
export default store
componentDidMount () {
// axios.post('/queryBannerList', {
// type: 1
// }).then(res => {
// let list = res.data.result.list
// store.dispatch(initList(list))
// })
const action = getTodoList()
store.dispatch(action)
}
//action
export const initList = lists => {
return {
type: 'INIT_LIST',
lists
}
}
export const getTodoList = () => {
return (dispatch) => {
axios.post('/queryBannerList', {
type: 1
}).then(res => {
let list = res.data.result.list
dispatch(initList(list))
})
}
}
//reducer
const todos = (state=[], action) => {
switch(action.type) {
case 'ADD_TODO':
return [
...state,
{
text: action.text,
id: action.id,
completed: false
}
]
case 'TOOGLE_TODO':
return state.map(todo =>
(todo.id === action.id) ? {...todo, completed: !todo.completed}:todo
)
case 'DEL_ITEM':
let todos = state
todos.splice(action.index, 1)
return todos
case 'INIT_LIST':
let lists = []
action.lists.forEach(item => lists.push({
text: item.id,
id: item.id,
completed: false
}))
return lists
default:
return state
}
}
export default todos
Redux-Thunk 就是对 store.dispatch的增强