redux和react-redux

安装

npm i redux
npm i react-redux

actions.js

import {UPDATEUSERINFO} from "./constant";

export const updateUser =data=>({type:UPDATEUSERINFO,data})

reducers.js

/*
	该文件用于汇总所有的reducer为一个总的reducer
*/
import {combineReducers} from 'redux'
import {UPDATEUSERINFO} from "./constant";

// 登录用户的用户信息store
let userStorage = window.sessionStorage.getItem('user')
const initSate = userStorage == null || userStorage == "undefined" ? {} : JSON.parse(window.sessionStorage.getItem('user'))

function userReducer(preState = initSate, action) {
    const {type, data} = action
    if(data){
        window.sessionStorage.setItem('user', JSON.stringify(data))
    }else{
        window.sessionStorage.setItem('user', JSON.stringify(initSate))
    }
    switch (type) {
        case UPDATEUSERINFO:
            return data
        default:
            return preState
    }
}

export default combineReducers({
    user: userReducer
})

constant.js

// 定义常量
export const UPDATEUSERINFO = 'updateUserInfo'

store.js

/*
	该文件专门用于暴露一个store对象，整个应用只有一个store对象
*/
//引入createStore，专门用于创建redux中最为核心的store对象
import {createStore} from 'redux'
//引入汇总之后的reducer
import reducer from './reducers.js'

//暴露store
export default createStore(reducer)

index.js（项目入口文件）

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import './lib/flexible' // 分辨率兼容
import store from './redux/store'
import {Provider} from 'react-redux'//
ReactDOM.render(
  <React.StrictMode>
      <Provider store={store}>//
        <App />
      </Provider>//
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

组件使用时

//引入action
import {updateUser} from "../../redux/actions.js";
//引入connect用于连接UI组件与redux
import {connect} from 'react-redux'
function child1(props) {
    let updateClickHandle=()=>{
        let userObj={...props.userInfo}
        userObj.userName="张三"
        props.updateUser(userObj)
    }
    return (
        <div>
            <h2>child1组件</h2>
            <h2>userid:{props.userInfo.userName}</h2>
            <button onClick={updateClickHandle}>修改</button>
        </div>
    )
}
//使用connect()()创建并暴露一个Count的容器组件
export default connect(
    state => ({
        userInfo:state.user,
    }),
    {updateUser}
)(child1)

如果在组件中只需要获取store中的state

//引入store，用于获取redux中保存状态
import store from '../../../../redux/store'
//使用 store.getState() 获取
store.getState().filePath