您现在的位置是:首页 >其他 >【React】redux和React-redux网站首页其他

【React】redux和React-redux

晴♡栀 2023-06-27 04:00:03
简介【React】redux和React-redux

🎀个人主页:努力学习前端知识的小羊
感谢你们的支持:收藏🎄 点赞🍬 加关注🪐

redux

redux的使用

redux适用于多交互、多数据源的场景。
使用redux的场景:

  1. 某个组件的状态需要共享
  2. 一个组件需要改变其他组件的状态时
  3. 一个组件需要改变全局的状态时

redux的三大原则:

  • 整个应用的 state 都被存储在一棵 object tree 中,并且 object tree 只存在于唯一的 store 中(这并不意味使用 redux 就需要将所有的 state 存到 redux 上,组件还是可以维护自身的 state )
  • state 是只读的。state 的变化,会导致视图(view)的变化。用户接触不到 state,只能接触到视图,唯一改变 state的方式则是在视图中触发actionaction是一个用于描述已发生事件的普通对象。
  • 使用 reducers 来执行 state 的更新。 reducers 是一个纯函数,它接受action和当前state作为参数,通过计算返回一个新的 state ,从而实现视图的更新。

Redux的工作流

在这里插入图片描述

  • 首先,用户在视图中通过store.dispatch方法发出action
  • 然后,store自动调用reducers,并且传入两个参数:当前state和收到的actionreducers会返回新的state
  • 最后,当store监听到state的变化,就会调用监听函数,触发视图的重新渲染

值得注意的是:Reducers不仅可以进行加工状态,还可以进行初始化状态(undefinded)

Redux API

store

  • store就是保存数据的地方,整个应用只能有一个store
  • redux提供createStore这个函数,用来创建一个store以存放整个应用的state
import { createStore } from "redux";
const store = createStore(reducer);

注:reducer是一个函数,是state操作的整合函数,每次修改state时都会触发该函数,他的返回值会成为新的state

action

  • state的变化,会导致视图的变化。但是,用户接触不到 state,只能接触到视图。所以,state 的变化必须是由视图发起的。
    - action 就是视图发出的通知,通知store此时的state应该要发生变化了。
  • action 是一个对象。其中的 type 属性是必须的,表示 action 的名称

定义一个名称为change-listaction,他所携带的数据信息是true

const action = {
                type:"change-list",
                payload:true       //可选属性
            }

reducer

  • store收action以后,必须给出一个新的state,视图才会进行更新。state的计算(更新)过程则是通过reducer实现
  • reducer是一个函数,他接受action和当前state作为参数,返回一个新的state
const reducer = function (state, action) {
  // ...
  return new_state;
};
  • 为了实现调用store.dispatch方法自动执行reducer函数,需要在创建store时将reducer传入createSore
import { createStore } from 'redux';
const reducer = function (state, action) {
  // ...
  return new_state;
};
const store = createStore(reducer);

上面代码中,createStore 方法接受reducer作为参数,生成一个新的 store。以后每当视图使用 store.dispatch 发送给 store 一个新的 action,就会自动调用 reducer函数,得到更新的 state

注: 这个 reducer 是一个纯函数。纯函数的意思是说,对于相同的输入,只会有相同的输出,不会影响外部的值,也不会被外部的值所影响。

store.dispatch()

store.dispatch是视图发出action的唯一方法,该方法接受一个action对象作为参数

import { createStore } from 'redux';
const store = createStore(reducer);

store.dispatch({
  type: 'ADD_TODO',
  payload: 'Learn Redux'  //可选属性
});

redux的方法使用

  1. 将reducer传递进createStore后,我们会得到一个store对象:
const store = Redux.createStore(countReducer);
  1. store对象创建后,对state的所有操作都需要通过它来进行:
  • 读取state:
store.getState()
  • 修改state:
store.dispatch({type:'ADD'})
  1. store还拥有一个subscribe方法,这个方法用来订阅state变化的信息
store.subscribe(()=>{
    // store中state发生变化时触发
    console.log('state变化了')
    console.log(store.getState())
});

总结:
Redux中最最核心的东西就是这个store,只要拿到了这个store对象就相当于拿到了Redux中存储的数据。在加上Redux的核心思想中有一条叫做“单一数据源”,也就是所有的state都会存储到一课对象树中,并且这个对象树会存储到一个store中。所以到了React中,组件只需获取到store即可获取到Redux中存储的所有state。

React-Redux

在前面我们使用redux,面对着组件无法状态无法公用,每一个状态组件都需要通过订阅来监视,状态更新会影响到全部组件更新等问题,React 官方在 redux 基础上提出了 React-Redux 库。

使用react-redux

  • 安装react-redux
npm install -i react-redux
  • 创建reducer
const TabbarReducer = (prevState={
    show:true
},action)=>{
    let newState = {...prevState}
    switch (action.type) {
        case "kerwinhide-tabbar":
            newState.show = false
            return newState;
        case "kerwinshow-tabbar":
            newState.show = true
            return newState;
        default:
            return prevState
       
    }
}
  • 创建store
const store = createStore(reducer);

provider

由于我们的状态可能会被很多组件使用,所以 React-Redux 给我们提供了一个 Provider 组件,可以全局注入 redux 中的 store ,只需要把 Provider 注册在根部组件即可

ReactDOM.createRoot(document.getElementById('root')).render(
  <Provider store={store}>
    <App />
  </Provider>
)

connect

react-redux提供connect方法,用于从UI组件生成容器组件。connect的意思,就是将这两种组件连起来

import getCinemaListAction from '../redux/actionCreator/getCinemaListAction'
import { connect } from 'react-redux'
function Cinemas(props){
// .....
}
const mapDispatchToprops = {
  getCinemaListAction
}
const mapStateToProps = (state)=>{
  return {
    list:state.CinemaListReducer.list,
    cityname:state.Cityreducer.cityname
  }
}
export default connect(mapStateToProps,mapDispatchToprops)(Cinemas)

多个reducer

Redux中是允许我们创建多个reducer的,我们可以根据它的数据和功能进行拆分,拆分后,还需要使用Redux为我们提供的函数combineReducer将多个reducer进行合并,合并后才能传递进createStore来创建store

const reducer = combineReducers({
    stuReducer,
    schoolReducer
});

const store = createStore(reducer);

读取数据时,直接通过state.stuReducerstate.schoolReducer读取数据

redux持久化

import {persistStore,persistReducer} from 'redux-persist'
import storage from 'redux-persist/lib/storage'

const persistConfig = {
    key:"kerwin",
    storage,
}

const reducer = combineReducers({
    Cityreducer,
    TabbarReducer,
    CinemaListReducer
})
//改造reducer
const persistedReducer =persistReducer(persistConfig,reducer)


const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(persistedReducer,composeEnhancers
    (applyMiddleware(reduxThunk,reduxPromise)));
    
//改造store
let persistor = persistStore(store)

export {store,persistor}


改造根组件

import { Provider } from "react-redux";
import  {store,persistor} from "./06-react-redux/redux/store";
import { PersistGate } from "redux-persist/integration/react";

ReactDOM.render(
    <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
            <App />
        </PersistGate>
     </Provider>
,document.getElementById('root'))

总结

数据流更新动画

  • Redux 是一个管理全局应用状态的库
    • Redux 通常与 React-Redux 库一起使用,把 Redux 和 React 集成在一起
  • Redux 使用 “单向数据流”
    • State 描述了应用程序在某个时间点的状态,视图基于该 state 渲染
    • 当应用程序中发生某些事情时:
      • 视图 dispatch 一个 action
      • store 调用 reducer,随后根据发生的事情来更新 state
      • store 将 state 发生了变化的情况通知 UI
    • 视图基于新 state 重新渲染
  • Redux 有这几种类型的代码
    • Action 是有 type 字段的纯对象,描述发生了什么
    • Reducer 是纯函数,基于先前的 state 和 action 来计算新的 state
    • 每当 dispatch 一个 action 后,store 就会调用 root reducer
风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。