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 (
            
      {this.state.items.map(function(item){ return
    • {item.text}
    • ; })}
    ); } }); ReactDOM.render( , document.getElementById('container') );

你可能感兴趣的:(web)