export default (initialState) => {
  const store = compose(
      applyMiddleware(
          thunk,
          createLogger()
      ),
      window.devToolsExtension ? window.devToolsExtension() : f => f
  )(createStore)(reducers, initialState);

  return store;
};

就是这行代码：

1	window.devToolsExtension ? window.devToolsExtension() : f => f

安装方法，就是去chrome的市场搜索Redux关键字就可以了！

没有服务端渲染和热替换

为什么要把这个单独提起来说呢？这是一个历史遗留问题。我们研究所用的Web框架是Flask，一个Python框架，包括前端也是用Flask的Jinja模板。没有Node.js也就意味着无法使用服务端渲染和热替换这两个炫酷的功能。

那么不是基于Node.js的前端程序，还能否使用Redux和React呢？当然可以，我只通过Webpack生成一个js文件，将js文件放进html里面。其他所有的功能都不要。这也是可以的。这也算是结合非Node平台的一个实践经验吧！当然你的包管理还得用NPM。

从另一个方面来说，基于Node.js的前端时代已经来临，如果你拒绝它，将会失去很多，或者寸步难行！

获取所有的todos

我们在action中进行http请求和服务端交互，即便是在中间件中执行http请求，其实质也是dispatch的封装。那么这个程序的关键就是action的编写。

实例化Wilddog，定义action类型:

actions.js

import Wilddog from 'wilddog/lib/wilddog-node'
/*
 * action 类型
 */
export const GET_TODO_ERROR = 'GET_TODO_ERROR';
export const GET_TODO_OK = 'GET_TODO_OK';
export const ADD_TODO_ERROR = 'ADD_TODO_ERROR';
export const ADD_TODO_OK = 'ADD_TODO_OK';
export const REMOVE_TODO_OK = 'REMOVE_TODO_OK';
export const REMOVE_TODO_ERROR = 'REMOVE_TODO_ERROR';

let wilddog=new Wilddog('https://redux-wilddog-todos.wilddogio.com')

从Wilddog数据库中获取所有的todos，因为Wilddog数据库是树状结构，生成的列表，其实质也是个对象，所以我们需要将其转化为数组：

    
    
export function getTodo() {
  return (dispatch,getState)=>{

    wilddog.child('todos').once('value',(snapshot)=>{
      let obj=snapshot.val();
      let array=[];
      for(let key in obj){
        array.push({key:key,text:obj[key].text})
      }
      dispatch({
        type: GET_TODO_OK,
        payload: array
      })
    },(err)=>{
      dispatch({
        type: GET_TODO_ERROR,
        payload: err
      })
    });


  }
}

wilddog.child('todos').once('value',function)是获取'todos'节点数据的方法。获取到数据后，转化为数组。然后dispatch一个GET_TODO_OK，告诉reducer获取数据成功，可以更新state了。数据都装在payload中。如果失败，则dispatch一GET_TODO_ERROR。

就是这么简单，不用写后台程序，在js中直接操作数据库！

那么在哪里执行这个getTodo呢？你可以在组件渲染后dispatch它，也可以在初始化store后，立即执行它。我用的是后面一种：

index.js

import { getTodo,registerListeners} from './actions'

let store = createStore();

store.dispatch(getTodo())
```    

## 添加新的todo

在action中定义添加todo的方法：

actions.js

```js
export function addTodo(text) {
  return (dispatch,getState)=>{

    wilddog.child('todos').push({
      text
    },(err)=>{
      if(err){dispatch({type:ADD_TODO_ERROR,payload:err})}
    });
  }
}

通过wilddog.child('todos').push()方法，直接往数据库中插入数据，第二参数是回调，失败的话，dispatch相应的action。

那么成功后的action在哪执行？我们需要再写一个function，绑定数据变动的回调。其实正常情况下，我们在这个function中就直接写成功后的回调了，主要是因为Wilddog数据库的成功回调不在push这个方法中。

actions.js

export function registerListeners() {
  return (dispatch, getState) => {

    wilddog.child('todos').on('child_removed', snapshot => {
      dispatch({
        type: REMOVE_TODO_OK,
        payload: snapshot.key()
      })
    });

    wilddog.child('todos').on('child_added', snapshot => dispatch({
      type: ADD_TODO_OK,
      payload: Object.assign({},snapshot.val(),{key:snapshot.key()})
    }));

  };
}

wilddog.child('todos').on('child_added')这个方法定义了添加todo成功后的回调，我们执行了一个ADD_TODO_OK 的action，并把新的todo对象放在payload中返回给reducer。

你也看到了，我们顺便把移除todo成功的回调也定义了。

我们在哪执行这个绑定函数呢？就在获取所有todos的后面吧！其实放在组件渲染完也可以！

index.js

1	store.dispatch(registerListeners())

移除指定todo

在action中添加移除todo的方法：

actions.js

export function removeTodo(key) {
  return (dispatch,getState)=>{

    wilddog.child(`todos/${key}`).remove((err)=>{
      if(err)dispatch({type:REMOVE_TODO_ERROR,payload:err})
    });
  }
}

通过Wilddog的remove方法移除数据库的指定节点。就是这么简单！然后编写失败后的回调以及action！

数据库在action中完事，state还需要reducer

数据库我们是操作完啦，不过组件的显示是基于state的，我们还要同步更新state，那么reducer就出场了！

reducers.js

    
import { combineReducers } from 'redux'
import { ADD_TODO_OK, REMOVE_TODO_OK ,GET_TODO_OK} from './actions'

function todos(state=[], action) {
  switch (action.type) {
    case GET_TODO_OK:
      return action.payload
    case ADD_TODO_OK:
      return [
        ...state,
        action.payload
      ]
    case REMOVE_TODO_OK:
      return state.filter((todo)=>todo.key!==action.payload
      )
    default:
      return state
  }
}

const todoApp = combineReducers({
  todos
})

export default todoApp