对react的redux的研究(一）

 

action types

 

export const ADD_TODO = 'ADD_TODO'

export const TOGGLE_TODO = 'TOGGLE_TODO'

export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER'

 

other constants

 

export const VisibilityFilters = {

SHOW_ALL: 'SHOW_ALL',

SHOW_COMPLETED: 'SHOW_COMPLETED',

SHOW_ACTIVE: 'SHOW_ACTIVE'

}

 

action creators

export function addTodo(text) {

return { type: ADD_TODO, text }

}

​

export function toggleTodo(index) {

return { type: TOGGLE_TODO, index }

}

​

export function setVisibilityFilter(filter) {

return { type: SET_VISIBILITY_FILTER, filter }

}

reducers

import { combineReducers } from 'redux'

import {

ADD_TODO,

TOGGLE_TODO,

SET_VISIBILITY_FILTER,

VisibilityFilters

} from './actions'

const { SHOW_ALL } = VisibilityFilters

 

function visibilityFilter(state = SHOW_ALL, action) {

switch (action.type) {

case SET_VISIBILITY_FILTER:

return action.filter

default:

return state

}

}

 

 

function todos(state = [], action) {

switch (action.type) {

case ADD_TODO:

return [

...state,

{

text: action.text,

completed: false

}

]

case TOGGLE_TODO:

return state.map((todo, index) => {

if (index === action.index) {

return Object.assign({}, todo, {

completed: !todo.completed

})

}

return todo

})

default:

return state

}

}

const todoApp = combineReducers({

visibilityFilter,

todos

})

​

export default todoApp

 

 

import {

addTodo,

toggleTodo,

setVisibilityFilter,

VisibilityFilters

} from './actions'

​

// Log the initial state

console.log(store.getState())

​

// Every time the state changes, log it

// Note that subscribe() returns a function for unregistering the listener

const unsubscribe = store.subscribe(() =>

console.log(store.getState())

)

​

// Dispatch some actions

store.dispatch(addTodo('Learn about actions'))

store.dispatch(addTodo('Learn about reducers'))

store.dispatch(addTodo('Learn about store'))

store.dispatch(toggleTodo(0))

store.dispatch(toggleTodo(1))

store.dispatch(setVisibilityFilter(VisibilityFilters.SHOW_COMPLETED))

​

// Stop listening to state updates

unsubscribe()