為了學習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學習原理的同學可以看看