React-redux

Redux

//indes.js
import React from 'react';
import ReactDOM from 'react-dom';
import Todolist from './Todolist';
ReactDOM.render(<Todolist />, document.getElementById('root'));

//Todolist.js
import React ,{ Component } from 'react'
import 'antd/dist/antd.css'; 
import { Input,Button ,List } from 'antd';
import store from './store/index.js'
import {
  getClick,
  getBtnClick,
  getDelete
} from './store/actionCreators'

class Todolist extends Component{
  constructor(props){
    super(props)
    this.state=store.getState()
   this.hanleBtnClick=this.hanleBtnClick.bind(this)
    this.handleClick=this.handleClick.bind(this)
    this.handleChangeBack=this.handleChangeBack.bind(this)
   
    store.subscribe(this.handleChangeBack)
    

  }
  render(){
    return(
      <div style={{marginTop:'10px',marginLeft:'10px'}}>
        <div>
          <Input 
          onChange={this.handleClick}
          value={this.state.inputValue}
           placeholer="ino" style={{ width:300 , marginRight:'10px'}}/>
          <Button type="primary"
            onClick={this.hanleBtnClick}
          >提交</Button>
          <List 
          style={{marginTop:'10px',width:'300px'}}
          size="large"
          bordered
          dataSource={ this.state.list }
          renderItem={(item,index) => <List.Item 
          onClick={this.handleDelete.bind(this,index)}
          
          >{item}</List.Item>} />
         </div>,
    </div>
    )
  }
  handleClick(e){
      const action=getClick(e.target.value);
      store.dispatch(action)
  }
  
  handleChangeBack() {
     this.setState(store.getState());
  }


 hanleBtnClick(index){
   const action=getBtnClick()
   store.dispatch(action)
 }

 handleDelete(index){
   const action=getDelete(index);
   store.dispatch(action);
 }

}

export default Todolist

//store/index.js
import { createStore } from 'redux';
import reducer from './reducer'

const store=createStore(
  reducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  );
export default store;

//store/reducer.js
import{
  change_input_Value,
  btn_Click_AddtoList,
  click_Delete

} from './actionTypes.js'
const defaultState={
  inputValue:'',
  list:[1,2,3]
}

//reducer 可以接受state，但是不能修改state
export default(state=defaultState,action)=>{
  if(action.type === change_input_Value){
    const newState = JSON.parse(JSON.stringify(state));
    newState.inputValue = action.value;
    return newState;
  }
  if(action.type === btn_Click_AddtoList){
    const newState = JSON.parse(JSON.stringify(state));
    newState.list.push(newState.inputValue);
    newState.inputValue='';
    console.log('newstate',newState);
    return newState
  }
  if(action.type === click_Delete){
    const newState = JSON.parse(JSON.stringify(state));
    newState.list.splice(action.index,1);
    newState.list=newState.list;
    console.log('newstate',newState);
    return newState
  }
  return state;
}

//store/actionTypes.js
export const change_input_Value='change_input_Value'
export const btn_Click_AddtoList='btn_Click_AddtoList'
export const click_Delete='click_Delete'

// store/actionCreators.js
import{
  change_input_Value,
  btn_Click_AddtoList,
  click_Delete

} from './actionTypes.js'

export const getClick=(value)=>({

    type:change_input_Value,
    value

})

export const getBtnClick=()=>({
  type:btn_Click_AddtoList

})
export const getDelete=(index)=>({
  type:click_Delete,
  index
})

复习补充

1.store 要求必须唯一
2.只有store能够改变自己的内容
3.Reduce 必须是一个纯函数，给定固定的输入就一定有固定的输出，且不会有任何的副作用—（在使用new date（） 时就不是一个纯函数，异步操作也不能有，对传入参数的修改同样不孕系）

核心API