為了學(xué)習(xí)React-Redux 基本用法

Redux官網(wǎng)

之前看過(guò)一次 云里霧里 也是難點(diǎn)

視圖層框架 React 其實(shí)看完之后才覺(jué)得 如果對(duì)業(yè)務(wù)邏輯特別清楚 寫(xiě)Redux還是很清楚的
所以 需要數(shù)據(jù)層框架 Redux 可以把Redux理解成 "物流分發(fā)點(diǎn)" Redux = > Reducer + flux

1. Web 應(yīng)用是一個(gè)狀態(tài)機(jī) 視圖跟狀態(tài)是一一對(duì)應(yīng)的 2.所有狀態(tài) 保存在一個(gè)對(duì)象里
   ——阮一峰大佬 解釋Redux就是兩句話

• Redux工作流程

Redux workflow

UI組件與容器組件的拆分

UI渲染
容器邏輯
無(wú)狀態(tài)組件 - 組件只有一個(gè)render函數(shù)的時(shí)候 替換成函數(shù)即可 性能較高 比如商品展示 只是數(shù)據(jù)展示類(lèi)的組件 都可以定義成無(wú)狀態(tài)組件

Redux里發(fā)送axios流程

引入axios
在生命周期componentDidmount里寫(xiě)請(qǐng)求

redux-thunk 中間件 發(fā)送axios

Redux-saga 中間件的試用

中間件處理異步處理

yarn add redux-saga

generator函數(shù) ES6
sagas 必須是generrator函數(shù)

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

saga平時(shí)要用的api特別多

action跟store之間 給dispatch方法升級(jí)

React-Redux

方便在React里用Redux

這一節(jié)收益較大

核心

• Provider 組件
  store提供給內(nèi)部組件 提供器
• connect方法 接受三個(gè)參數(shù)
  前兩個(gè)參數(shù)是連接規(guī)則
  第一個(gè)參數(shù)是store里的數(shù)據(jù)跟組件的關(guān)系
  第二個(gè)參數(shù)是 組件props 如何更改store數(shù)據(jù) 如何跟store的dispatch方法做關(guān)聯(lián)

代碼如下

• 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里面的所有標(biāo)簽  連接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 {
  
  
  
      // 疑問(wèn)一 怎么獲取todolist的父組件傳來(lái)的值
      
      // 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>
          )   
      }
  }
  
  
  // 定義映射關(guān)系   把store的數(shù)據(jù)    用props父子組件傳值的方式傳給todolist
  const mapStateToProps = (state)=>{
      console.log(state)
      return {
          inputValue : state.inputValue,
          list : state.list
      }
      
  }
  
  // store.dispatch 掛載到props上  改變store的內(nèi)容 必須觸發(fā)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'){
          //做一個(gè)深拷貝
          const newState = JSON.parse(JSON.stringify(state))
          newState.inputValue = actions.value
  
          return newState
      }
  
  
      if (actions.type === 'add_item'){
          //做一個(gè)深拷貝
          const newState = JSON.parse(JSON.stringify(state))
          newState.list.push(newState.inputValue)
          newState.inputValue = ''
          return newState
      }
      return state
  }
  

學(xué)習(xí)相關(guān)鏈接

React小書(shū) - 動(dòng)手實(shí)現(xiàn)react-redux學(xué)習(xí)原理的同學(xué)可以看看