React-Redux learning

download

npm install react-redux

React-Redux is the official React binding library for Redux. It enables your React components to read data from the Redux store, and dispatch actions to the store to update the data.
React-Redux divides all components into two categories: UI components and container components. UI components are responsible for UI rendering, and container components are responsible for managing data and logic.

UI components: only responsible for UI rendering, without any business logic; no state (that is, the variable this.state is not used); all data is provided by the parameter this.props; API container
components that do not use any Redux: responsible for management Data and business logic, not responsible for UI rendering; with internal state; API using Redux.
React-Redux stipulates that all UI components are provided by users, and container components are automatically generated by React-Redux. In other words, the user is responsible for the visual layer, and state management is all handed over to it.

connect()

import React from "react";
// import store from '../store'
// 连接器
import {
    
     connect } from 'react-redux'
import {
    
    
  changeInputAction,
  addItemAction,
  detelclickAction
} from '../store/reducercreateor'
import {
    
    
  change_input,
  add_item,
  dete
} from '../store/reduceType'
const todoList = (props) => {
    
    
  let {
    
     inputValue, changeHandler, clickHandler, detelclick } = props
  return (
    <div>
      <div>
        <input type="text" placeholder= {
    
     inputValue }
        onChange={
    
     changeHandler }
        value= {
    
     inputValue }/>
        <button onClick={
    
     clickHandler}>提交</button>
      </div>
      <ul>
        {
    
    
           props?.list?.map((item,index) => {
    
    
            return (
              <li key={
    
    index} onClick= {
    
    (index) => {
    
     detelclick(index)}}>{
    
     item }</li>
            )
          })
        }
      </ul>
    </div>
  )
}
const StateToProps = (state) => {
    
    
   return {
    
    
     inputValue: state.inputValue,
     list: state.list
   }
}
const dispatchToProps = (dispatch) => {
    
    
  return {
    
    
    changeHandler (e) {
    
    
      dispatch(changeInputAction(change_input, e.target.value))
    },
    clickHandler (e) {
    
    
       dispatch(addItemAction(add_item, e.target.value))
    },
    detelclick (index) {
    
    
      console.log(index)
      dispatch(detelclickAction(dete, index))
    }
  }
}
// 映射关系
export default connect(StateToProps, dispatchToProps)(todoList)

How to write in redux

import {
    
    
  change_input,
  add_item,
  dete
} from './reduceType'
const defaultState = {
    
    
  inputValue: '请在输入框输入',
  list: []
}
// eslint-disable-next-line import/no-anonymous-default-export
export default (state= defaultState, action) => {
    
    
  console.log(state, action)
  let newState = JSON.parse(JSON.stringify(state))
  if (action.type === change_input) {
    
    
    newState.inputValue = action.value
    return newState
  }
  if (action.type === add_item) {
    
    
    newState.list.push(newState.inputValue)
    newState.inputValue = ''
    return newState
  }
  if (action.type === dete) {
    
    
    newState.list.splice(action.index, 1)
    return newState
  }
  return state
}

Declare type in reduceType.js

const change_input = 'change_input'
const add_item = 'add_item'
const dete = 'dete'
export {
    
    
  change_input,
  add_item,
  dete
}