Redux 学习笔记（四）

actionCreator

首先，定义actionCreator。

var addTodoActions = function(text){
    return {
        type: 'add_todo',
        text: text
    };
};

reducer

然后，定义reducer，可以看到是对add_todo事件进行了处理

var todoReducer = function(state, action){

    if(typeof state === 'undefined'){
        return [];
    }

    switch(action.type){
        case 'add_todo':
            return state.slice(0).concat({
                text: action.text,
                completed: false
            });
            break;
        default:
            return state;
    }
};

接着，以前面定义的reducer为参数，创建store。

store

var store = Redux.createStore(todoReducer);

将react跟store进行绑定

最后，到关键步骤啦，可以看到：

1. 在getInitialState里：通过store.getState()获取数据进行初始的渲染。

2. 在componentDidMount里：监听store的状态变化，当状态变化时，触发onChange回调。

3. 在handleAdd里：通过store.dispatch(addTodoActions(value))修改state。（步骤二对这个进行了监听）

4. 在onChange里：获取最新的state，并重新渲染视图

   var App = React.createClass({
       getInitialState: function(){
           return {
               items: store.getState()
           };
       },
       componentDidMount: function(){
           var unsubscribe = store.subscribe(this.onChange);
       },
       onChange: function(){
           this.setState({
               items: store.getState()
           });
       },
       handleAdd: function(){
           var input = ReactDOM.findDOMNode(this.refs.todo);
           var value = input.value.trim();
   
       if(value)
           store.dispatch(addTodoActions(value));
   
       input.value = '';
   },
   render: function(){
       return (
           <div>
               <input ref="todo" type="text" placeholder="输入todo项" style={{marginRight:'10px'}} />
               <button onClick={this.handleAdd}>点击添加</button>
               <ul>
                   {this.state.items.map(function(item){
                       return <li>{item.text}</li>;
                   })}
               </ul>
           </div>            
           );
        }
   });
   
   ReactDOM.render(
        <App />, 
       document.getElementById('container')
   );