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

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>
);