reace(js) redux

下包npm install redux react-redux        

官网为什么 Redux Toolkit 是如今使用 Redux 的方式 | Redux 中文官网

先在src下创建一个store

store/index.js

import {createStore} from 'redux'

// action 代表dispatch传过来的内容 state原始数据
const reducer=(state,action)=>{
    // 深拷贝
    const NewState=JSON.parse(JSON.stringify(state))
    // action.type判断条件
    switch(action.type){
        // 发生改变 return返回新数据NewState
        case "CHANGE_LIST":
            NewState.userList.push(7)
            return NewState
            // 如果页面不发生改变 return返回原始数据state
        default:
                return state
    }
}

const initState={
    userList:[1,2,3,5]
}

const store=createStore(reducer,initState)

export default store;

在index页面中引入

 在页面中调用（快捷键rfcredux）

import React from 'react'
import { connect } from 'react-redux'

export const index = (props) => {
  // console.log(props, '7777')  (userList)
  return (
    <div>
      index
      {props.userList}
      <button onClick={props.changeList}>修改</button>
    </div>
  )
}

// 映射 state数据 去 当前组件的props
const mapStateToProps = (state) => {
  // state 获取到store页面中的initState（userList数据）
  // console.log(state)
  // 将userlist映射到state
  const { userList } = state
  return {
    userList
  }
}


// 映射 修改state数据的方法 去 当前组件的props
const mapDispatchToProps = (dispatch)=>{
  return{
      changeList(){
          dispatch({type:'CHANGE_LIST'})//大写
      }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(index)