(redux简单体验)创建Redux中的仓库-store和reducer

2022-06-19 02:00:16 阅读：150 来源： 互联网

标签：redux TodoList reducer react import Redux store

npm install --save redux react-redux //安装react-redux和redux "^4.2.0",
只装 redux也可

TodoList.js

import React, { Component } from 'react'
import {Input,Button,List} from 'antd'
import store from './store';

class TodoList extends Component {
  constructor(props){
    super(props)
    console.log(store.getState())
    this.state=store.getState()
  }
    render() { 
        return (  
            
            <div style={{margin:'10px'}}>
                <div><Input 
            placeholder={this.state.inputValue}
            style={{width:'250px',marginRight:'10px'}}/>
            <Button type='primary'>增加</Button>
            </div>
            <div style={{margin:'10px',width:'300px'}}>
                <List 
                bordered 
                dataSource={this.state.List}
                renderItem={item=>(<List.Item>{item}</List.Item>)}/>
            </div>
            </div>
        );
    }
}
 
export default TodoList;

store/reducer.js

//reduxer暴露的是一个方法
const defaultState={
    inputValue:"write Something",
    List:[
    '早八点开晨会，分配今天的代码任务',
    '早九点和项目经理开需求沟通会1',
    '早九点和项目经理开需求沟通会1',
]
}

export default(state=defaultState,action)=>{
    
    return state
}

store/index.js

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

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import TodoList from './TodoList'
import 'antd/dist/antd.css'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <TodoList />
  </React.StrictMode>
);

标签：redux,TodoList,reducer,react,import,Redux,store
来源： https://www.cnblogs.com/Jarsmine/p/16389774.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

(redux简单体验)创建Redux中的仓库-store和reducer