Redux 入门+面试题

什么是 redux?它的核心概念是什么?

redux 是一个状态管理库,它将项目中的数据集中的管理在一个 Store 里,使得存取都非常简单。 它的核心概念包括:

单一数据源(Store):Redux 设计中整个应用的状态存储在一个单一的 Store 中,使得状态管理集中且易于追踪。

Actions:Actions 是把数据从应用传到 Store 的简单对象,描述了应用中发生的事情。每个 Action 都有一个必须的 type 属性,用来定义 Action 的类型。

Reducers:Reducers 是纯函数,接收旧的 state 和一个 Action,然后返回一个新的 state,以此来响应 Action,更新应用状态。Reducers 保持无副作用,确保相同输入始终得到相同输出。

State:Redux 中的状态(State)是只读的,要改变状态,必须 dispatch 一个 Action,通过 对应的 Reducer 来生成新的状态。

redux 的工作流程是什么?

  1. Action 发起

    • 用户与应用交互(如点击按钮)时,触发一个动作(Action)。
    • Action 是一个普通的 JavaScript 对象,包含一个必需的type属性,用来描述发生了什么事情,还可以携带其他数据(payload)。
  2. Action Dispatch(派发)

    • 通过调用 Redux Store 的 dispatch 方法,将 Action 发送到 Store。
    • dispatch 方法是修改应用状态的唯一途径。
  3. Reducer 处理

    • Store 收到 Action 后,会将它转发给 Reducer 函数。
    • Reducer 是一个纯函数,接受当前的 State 和收到的 Action 作为参数,基于这两个输入计算并返回新的 State。
    • Reducer 必须是无副作用的,给定相同输入应始终产生相同的输出。
    • 如果有多个 Reducer,Redux 会使用combineReducers函数将它们组合成一个大的 Reducer 树,每个子 Reducer 负责管理状态树的一部分。
  4. State 更新与 View 重新渲染

    • Store 收到 Reducer 返回的新 State 后,会更新自身的 State,并触发一个更新通知。
    • 任何订阅了 Store 更新的组件(通过 React-Redux 的connectuseSelector等)都会收到通知,然后可以根据新的 State 重新渲染视图。
    • 这个过程确保了视图总是反映了最新的应用状态。

使用步骤 Demo 演示。

// 入口文件
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import store from "./store";
import { Provider } from "react-redux";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);
// store/index.js
import { configureStore } from "@reduxjs/toolkit";
// 导入子模块
import counterReducer from "./modules/counterStore";

// 合并成新的模块
const store = configureStore({
  reducer: {
    // counter(合并store时的命名空间):counterReducer:(对应的子store里的方法和数据)
    counter: counterReducer,
    // ...
  },
});

export default store;
// store/modules/counterStore.js
import { createSlice } from "@reduxjs/toolkit";

const counterStore = createSlice({
  // 命名空间
  name: "counter",
  // 初始状态
  initialState: {
    count: 666,
    channelList: [],
  },
  // 同步方法
  reducers: {
    inscrement(state) {
      state.count += 1;
    },
    decrement(state) {
      state.count -= 1;
    },
    addToNumber(state, action) {
      state.count += action.payload;
    },
    setChannels(state, action) {
      state.channelList = action.payload;
    },
  },
});

// 解构方法
const { inscrement, decrement, addToNumber, setChannels } =
  counterStore.actions;

const fetchChannels = () => {
  return async (dispatch) => {
    const res = await fetch("http://www.********.com/api/channels");
    const data = await res.json();
    dispatch(setChannels(data.data.channels));
  };
};

// 获取reducers
const reducer = counterStore.reducer;

export { inscrement, decrement, addToNumber, fetchChannels };

export default reducer;
// App.js
import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
// ----- // 导入store中的方法  start -----
import {
  inscrement,
  decrement,
  addToNumber,
  fetchChannels,
} from "./store/modules/counterStore";
// ----- 导入store中的方法  end -----

export default function App() {
  // ----- 获取store数据 start-----
  const { count, channelList } = useSelector((state) => state.counter);
  // ----- 获取store数据 end-----

  //  获取 dispatch
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchChannels());
  }, [dispatch]);

  return (
    <div>
      <button onClick={() => dispatch(inscrement())}>加一</button>
      <button onClick={() => dispatch(decrement())}>减一</button>
      <button onClick={() => dispatch(addToNumber(1000))}>加十</button>
      <div>
        <ul>
          {channelList.slice(0, 5).map((item, index) => {
            return <li key={item.id}>{item.name}</li>;
          })}
        </ul>
      </div>
    </div>
  );
}
Redux中,常用的中间件有redux-thunk、redux-saga和redux-logger。redux-thunk的主要作用是可以使action可以变成函数形式,接收两个参数dispatch和getState,可以进行异步操作。redux-saga是一个强大的异步处理库,它使用了ES6的Generator函数来处理异步流程,可以更加清晰和可控地管理副作用。redux-logger的主要作用是在控制台打印输出新老state等信息,方便开发调试。这些中间件在开发过程中可以提高代码的可读性和可维护性,使开发者更方便地处理异步操作和调试程序。此外,react-reduxRedux官方提供的用于配合React的绑定库,它提供了Provider和connect这两个重要的成员,可以更方便地在React组件中使用Redux的状态和操作。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [【面试题redux及中间件相关面试题&解析](https://blog.csdn.net/Ronychen/article/details/125679270)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [React,Redix面试题](https://blog.csdn.net/qq_48962360/article/details/127098928)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值