关于Redux

2020-12-08  本文已影响0人  蟹棒同学

1.工作流程


image.png

拟人理解:
Component相当于用户提出需求(Action Creators)然后通知到管理员(Store)使用一些命令到记录本(Reducers)中查询数据并做更新操作等。

2.创建store,下载redux devtools拓展工具


image.png
image.png

3.创建reducer


image.png

4.在组件中的使用


image.png
5.更新store数据及更新后获取
render(){
        return (
            <div>
                <Input 
                value={this.state.inputValue} 
                style={{width: 300}}
                onChange={this.handleInputChange}
                ></Input>
                <Button type="primary" onClick={this.handleButtonClick}>提交</Button>
                <List
                    bordered
                    dataSource={this.state.list}
                    renderItem={item => (
                    <List.Item>
                        {item}
                    </List.Item>
      )}
    />
            </div>
        )
    }

按钮绑定事件

handleInputChange(e){
        const action = {
            type:'change_input_value',
            value:e.target.value
        }
        store.dispatch(action)
    }
 handleButtonClick(){
        const action = {
            type: 'add_todo_item',
        };
        store.dispatch(action);
    }

redux通过action来告诉store要更新数据,action为一个对象,需要type属性来描述要做的事情,value来传输更新的数据,dispatch方法来传递给store,这里store会自动处理并转发给reducer。

image.png

reducer的默认两个参数,state 是当前的状态,可以设置默认值,action为传递来的新数据。
(reducer为纯函数,给定固定的输入,就一定会有固定的输出,而且不会有任何副作用:如果 赋值 new Date(); 或ajax请求就不是固定输入不是纯函数。如果修改了原参数,对参数做了额外的修改产生了副作用,则也不是纯函数)
使用action的type来判断要处理哪些事情后,拷贝一下原数据state,将action新数据复制到副本state,将副本state返回给store。

image.png

使用 subscribe 订阅功能,只要store改变就通知,执行handleStoreChange函数


image.png

此时当前组件的state就跟着更新,render函数执行,视图更新。

6.整合action的type和action方法


image.png

将action的所有type整合到一个文件方便测试和修改

image.png

将action函数整合到一个文件方便后续添加


image.png

在组件中使用整合的action方法

Redux API:
1.createStore 创建一个store
2.store.dispatch 派发action 将action传递给store
3.store.getState 获取到store中的所有数据内容
4.store.subscribe 订阅store的改变,只要store发生改变,此函数接收的回调函数自动执行

上一篇 下一篇

猜你喜欢

热点阅读