Redux实现简易Todolist

React-Transition-Group

React动画组件库 实现css3过渡动画效果

用法其实我没怎么看 直接快进 想快点进入项目阶段

数据Mock

其实有很多工具 我推荐Mock.js

Redux

Redux官网

之前看过一次 云里雾里 也是难点

视图层框架 React 其实看完之后才觉得 如果对业务逻辑特别清楚 写Redux还是很清楚的
所以 需要数据层框架 Redux 可以把Redux理解成 "物流分发点" Redux = > Reducer + flux

1. Web 应用是一个状态机 视图跟状态是一一对应的 2.所有状态 保存在一个对象里
   ——阮一峰大佬 解释Redux就是两句话

• Redux工作流程

Redux workflow

Ant + Redux 实现Todolist

antd 官网
按照官网安装即可
下载时间有点久

优先编写Store

注意流程

安装redux devtools

跟着视频实现了一遍 自己又实现了一遍 受益匪浅

核心步骤

• 组件欲更改state 通过action传递给store
• dispatch(action)传递给store -> store自动将state,action 传递给reducer
• reducer接受action 操作state 并返回新state
• store接受新state 传递给组件
• 组件store.subscribe() 得到新state 渲染组件

Redux核心步骤

• createStore
• store.dispathch
• store.getState
• store.subscribe
  听得时候以为自己能写出来 但是还是卡主了 自己实现一遍或者增加功能试试看 理解的更透彻

ActionTypes的拆分

ActionCreator统一创建action

把最终代码贴上

• Todolist

  import React, { Component } from 'react';
  import 'antd/dist/antd.css'
  import { Input, Button, List } from 'antd';
  // 第三步引入之前创建好的store
  import store from './store/index.js'
  
  class Todolist extends Component {
  
      constructor(props){
          super(props)
          this.state = store.getState()
              
          this.handleInputChange = this.handleInputChange.bind(this)   
          this.hanleStoreStateChange = this.hanleStoreStateChange.bind(this)
          this.handleBtnClick = this.handleBtnClick.bind(this)
          //reducer传递给store新state store接受后state改变 立即执行subscribe()方法
          store.subscribe(this.hanleStoreStateChange)
      }
  
      render() {
        
          return (
  
              <div style={{width:'500px',margin:'0 auto'}}>
                  <h1>Hello World!</h1>
                  <div>
                      <Input 
                      value={this.state.inputValue} 
                      placeholder="请输入内容" 
                      style={{ width: '400px', marginRight: '10px' }} 
                      onChange={this.handleInputChange}
                      />
  
                      <Button type="primary" onClick={this.handleBtnClick}>提交</Button>
                  </div>
  
                  <List
                      style={{marginTop:'20px',width: '400px'}}
                      bordered
                      dataSource={this.state.list}
                      renderItem={(item,index) => (
                          <List.Item onClick={this.handleItemDelete.bind(this,index)}>
                              {item}
                          </List.Item>
                      )}
                  />
              </div>
          )
      }
  
      handleInputChange(e){
          // 创建action命令 
          const val = e.target.value
          const action = {
              type:'change_input_value',
              value:val
          }
  
          // 把命令传递给store
          store.dispatch(action)
          
          //store会自动把命令(action)跟state 传递给reducer
      }
  
      // 这个函数被立即执行
      hanleStoreStateChange(){
          console.log('store changed see what happened')
          console.log(store.getState())
          this.setState(store.getState())
      }
  
  
      handleBtnClick(){
          const action = {
              type:'add_item'
          }
  
          store.dispatch(action)
  
      }
  
  
      handleItemDelete(index){
          console.log(index)
  
          const action = {
              type:'delete_item',
              index
          }
  
          store.dispatch(action)
      }
  
  }
  
  export default Todolist;
  
  

  • store

  import {createStore} from 'redux';
  import reducer from './reducer'
  // 第二步把生成的仓库管理 交给store(管理员)
  const store = createStore(reducer);
  
  export default store;
  

  • reducer

  
  // 第一步创建仓库
  //数据仓库里目前有两个数据
  const defaultState = {
      inputValue:'',
      list:[1,2,3]
  }
  // reducer可以接受state 绝不能修改state
  export default (state=defaultState,action)=>{
      //store可以自动把state跟action 传递给reducer
      //reducer处理过传来的state之后 再把新state传递给store
  
      console.log(state,action)
      if(action.type ==='change_input_value'){
          // 在这里做个深拷贝
          const newState = JSON.parse(JSON.stringify(state))
          newState.inputValue = action.value
          return newState
      }
  
  
  
      if(action.type ==='add_item'){
          const newState = JSON.parse(JSON.stringify(state))
          newState.list.push(newState.inputValue)
          newState.inputValue = ''
          return newState
      }
      if(action.type === 'delete_item'){
          const newState = JSON.parse(JSON.stringify(state))
          newState.list.splice(action.index,1)
          return newState
      }
      //state 可以理解为所有数据
      return state
  }
  

最终界面