React-Redux实现极其简易的Todolist

为了学习React-Redux 基本用法

Redux官网

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

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

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

• Redux工作流程

Redux workflow

UI组件与容器组件的拆分

UI渲染
容器逻辑
无状态组件 - 组件只有一个render函数的时候 替换成函数即可 性能较高 比如商品展示 只是数据展示类的组件 都可以定义成无状态组件

Redux里发送axios流程

引入axios
在生命周期componentDidmount里写请求

redux-thunk 中间件 发送axios

Redux-saga 中间件的试用

中间件处理异步处理

yarn add redux-saga

generator函数 ES6
sagas 必须是generrator函数

sagas.js 里暴露出去的必须是generator function

saga平时要用的api特别多

action跟store之间 给dispatch方法升级

React-Redux

方便在React里用Redux

这一节收益较大

核心

• Provider 组件
  store提供给内部组件 提供器
• connect方法 接受三个参数
  前两个参数是连接规则
  第一个参数是store里的数据跟组件的关系
  第二个参数是 组件props 如何更改store数据 如何跟store的dispatch方法做关联

代码如下

• index.js

  import React from 'react';
  import ReactDOM from 'react-dom';
  import Todolist from './Todolist';
  
  //使用react-redux
  import {Provider} from 'react-redux'
  import store from './store/index'
  
  // provider 把store传给了 provider里面的所有标签  连接store
  const name = 'AILI 艾力'
  const App = (
      <Provider store={store}>   
          <Todolist title={name} />
      </Provider>
  )
  
  ReactDOM.render(App,document.getElementById('root'));
  

• Todolist.js

  import React,{ Component } from 'react';
  import { connect } from 'react-redux'
  
  
  class Todolist extends Component {
  
  
  
      // 疑问一 怎么获取todolist的父组件传来的值
      
      // constructor(props){
      //     super(props)
      //     console.log(props)
      //     const newName = props.title
      //     this.setState({
      //         title:newName
      //     })
      // }
  
  
  
  
  
  
      render() {
          return (
              <div>
  
                  <div>
                      <h1>Hello World!!!</h1>
  
                      <input 
                          value={this.props.inputValue}
                          onChange={this.props.ChangeInput}
                      />
                      <button onClick={this.props.handleSubmit}>提交</button>
                  </div>
  
                  <ul>
                      {this.props.list.map(
                          (item,index)=>{
                              return <li key={index}>
                                  {item}
                              </li>
                          }
                      )}
                  
                  </ul>
  
              </div>
          )   
      }
  }
  
  
  // 定义映射关系   把store的数据    用props父子组件传值的方式传给todolist
  const mapStateToProps = (state)=>{
      console.log(state)
      return {
          inputValue : state.inputValue,
          list : state.list
      }
      
  }
  
  // store.dispatch 挂载到props上  改变store的内容 必须触发dispatch
  const mapDispatchToprops = (dispatch) =>{
      return {
          ChangeInput(e){
              const action = {
                  type:'change_input_value',
                  value:e.target.value
              }
              // console.log(e.target.value)
              dispatch(action)
          },
  
  
  
          handleSubmit(){
              const action = {
                  type:'add_item'
              }
              dispatch(action)
          }
      }
  }
  
  
  
  // connect 方法就是让todolist跟store做连接
  export default connect(mapStateToProps,mapDispatchToprops)(Todolist)
  

• store.js

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

• reducer.js

  const defaultState = {
      inputValue:'',
      list:[]
  }
  
  export default (state=defaultState,actions)=>{
      console.log(state,actions)
  
      if (actions.type === 'change_input_value'){
          //做一个深拷贝
          const newState = JSON.parse(JSON.stringify(state))
          newState.inputValue = actions.value
  
          return newState
      }
  
  
      if (actions.type === 'add_item'){
          //做一个深拷贝
          const newState = JSON.parse(JSON.stringify(state))
          newState.list.push(newState.inputValue)
          newState.inputValue = ''
          return newState
      }
      return state
  }
  

学习相关链接

React小书 - 动手实现react-redux学习原理的同学可以看看