Redux

    xiaoxiao2022-07-07  142

    1.Redux概念

    ——Redux把所有数据存储在store里进行管理,一个组件改变了store数据里的内容,其他的组件感知到store的变化,再来取数据,这样就实现了一个组件之间数据传递的功能

    2.使用Antd实现ToList布局

    import React,{Component,Fragment} from 'react'; import 'antd/dist/antd.css'; import {Input,Button,List} from 'antd'; import Item from 'antd/lib/list/Item'; const data = [ 'Racing car sprays burning fuel into crowd.', 'Japanese princess to wed commoner.', 'Australian walks 100km after outback crash.', 'Man charged over missing wedding girl.', 'Los Angeles battles huge wildfires.', ]; class TodoList extends Component{ render(){ return(<div style={{marginTop:'10px',marginLeft:'10px'}}> <Input placeholder='你好' style={{width:'300px',marginRight:'5px'}} /> <Button type='primary'>提交</Button> <List bordered dataSource={data} renderItem={Item=>(<List.Item>{Item}</List.Item>)} style={{width:'300px',marginTop:'10px'}} ></List> </div>) } } export default TodoList;

    3.Redux的工作流程

    4.创建Redux中的Store

    (1)下载安装redux

    npm install redux

    (2)创建文件夹 (3)写入代码 index.js里

    import {createStore} from 'redux'; import reducer from './reducer'; const store = createStore(reducer); export default store;

    reducer.js里

    const defaultState = {//仓库中存放的原始数据 inputValue : '123', list : ['ha','ji','sjk'] } export default(state=defaultState,action) => { return state; }

    组件中用以下方法导出数据

    this.state = store.getState();
    最新回复(0)