React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > Redux使用方法和基本原理

Redux使用方法和基本原理解读

作者:音仔小瓜皮

这篇文章主要介绍了Redux使用方法和基本原理,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

一、redux core和redux tookit

1、区别

redux core是最原生的redux概念,其优点是可定制性好,缺点是什么都要自己写。主要思想是通过传入createStore,将actions、reducers、middlewares等进行自己配置。

redux toolkit其实是去包裹一个redux core的工具集,引入了一些简化的 API去配置redux store。同时Redux Toolkit 中的 createSlice 自动生成了每个 reducer case 对应的 action creators,免去了手动编写 action creators 的繁琐步骤。不仅如此,redux toolkit还默认集成了redux-thunk中间件。避免了每次都要手动配置。

2、基本配置和使用

1、redux core

基本api:

当你配置某个store在store.js文件中、reducer定义在reducers.js文件中、并且引入一些middleware时,配置方法大致为:

//store.js
import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers';
import thunkMiddleware from 'redux-thunk'; // Redux Thunk 中间件
import loggerMiddleware from 'redux-logger'; // Redux Logger 中间件
const middlewares = [thunkMiddleware, loggerMiddleware]; // 定义要使用的中间件数组
const store = createStore(
  rootReducer,
  applyMiddleware(...middlewares) // 将中间件数组展开并应用到 Redux Store
);
export default store;
//reducers.js
import { combineReducers } from 'redux';
import counterReducer from './counterReducer';
import userReducer from './userReducer';
// 合并多个 reducer
const rootReducer = combineReducers({
  counter: counterReducer,
  user: userReducer
});
export default rootReducer;
//counterReducer.js
export function counterReducer(state = { value: 0 }, action) {
  switch (action.type) {
    case 'counter/incremented':
      return { value: state.value + 1 }
    case 'counter/decremented':
      return { value: state.value - 1 }
    default:
      return state
  }
}
//dispatch传入action对象
//store.dispatch({ type: 'counter/incremented' })
// {value: 1}
//store.dispatch({ type: 'counter/incremented' })
// {value: 2}
//store.dispatch({ type: 'counter/decremented' })

2、redux toolkit

在slice.js中创建reducers、在store.js中创建store并配置reducers和中间件

//store.js
import { configureStore } from '@reduxjs/toolkit'
import todosReducer from '../features/todos/todosSlice'
import filtersReducer from '../features/filters/filtersSlice'
export const store = configureStore({
  reducer: {
    todos: todosReducer,
    filters: filtersReducer
  }
})

在slice中,只需要直接定义reducers操作而无需再对action creators即{type :  actions.type}对象做出显示创建或定义,其放入dispatch中会自动创建、分发

//slice.js,导出actions和reducers
import { createSlice } from '@reduxjs/toolkit'
const todosSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    todoAdded(state, action) {
      state.push({
        id: action.payload.id,
        text: action.payload.text,
        completed: false
      })
    },
    todoToggled(state, action) {
      const todo = state.find(todo => todo.id === action.payload)
      todo.completed = !todo.completed
    }
  }
})
export const { todoAdded, todoToggled } = todosSlice.actions
export default todosSlice.reducer

二、dispatch action修改store

在组件中,我们可以用useDispatch hook来获取到dispatch方法,从而对store进行操作

三、reducer

Reducer 是同步的

在 Redux 中,Reducer 是一个纯函数,负责处理分发的 action 并更新状态。

它是一个纯粹的函数,不应该包含任何副作用,如异步操作、网络请求等。

四、middleware中间件

1、常用中间件 redux-thunk

是一个 Redux 中间件,它允许你在 action creators 中返回函数而不仅仅是普通的 action 对象。

这个函数可以用于处理异步操作,如发起网络请求、定时器、以及其他需要延迟执行的操作。

在 Redux 中,普通的 action 必须是一个普通的对象,包含一个 type 属性来描述操作的类型。

有些情况下,我们需要在 action creators 中执行异步操作,例如从服务器获取数据,然后再将相应的数据分发到 Redux Store 中。

这就是 redux-thunk 发挥作用的地方。

redux-thunk 的主要功能是拦截分发的 action,dispatch中可以接受对象也可以接受函数,并判断 action 是一个普通的对象还是一个函数。

如果是一个函数, redux-thunk 会将 dispatch getState 函数传递给这个函数,使得你可以在函数内部执行异步操作,并在操作完成后手动分发其他 action。

*用法示例:

import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import rootReducer from './reducers';
const store = createStore(
  rootReducer,
  applyMiddleware(thunkMiddleware)
);
// 异步 action creator
function fetchData() {
  return (dispatch, getState) => {
    // 获取当前 Redux store 状态
    const currentState = getState();
    // 执行异步操作
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        // 在异步操作完成后使用 dispatch 函数将请求结果传递给 Redux store
        dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
      });
  };
}
store.dispatch(fetchData()); // 分发异步 action

创建一个 Saga,它是一个 Generator 函数,用于处理特定的异步操作。

Saga 监听 action 并执行相应的逻辑。

你可以在 Saga 中执行异步操作,如网络请求、定时器等。

// sagas.js
import { takeEvery, put, call } from 'redux-saga/effects';
import { FETCH_DATA, fetchDataSuccess, fetchDataFailure } from './actions';
function* fetchDataSaga(action) {
  try {
    const response = yield call(fetch, 'https://api.example.com/data');
    const data = yield call([response, 'json']);
    yield put(fetchDataSuccess(data));
  } catch (error) {
    yield put(fetchDataFailure(error));
  }
}
export function* rootSaga() {
  yield takeEvery(FETCH_DATA, fetchDataSaga);
}

创建saga middleware放入到store中

// store.js
import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer from './reducers';
import { rootSaga } from './sagas';
const sagaMiddleware = createSagaMiddleware();
const store = createStore(
  rootReducer,
  applyMiddleware(sagaMiddleware)
);
sagaMiddleware.run(rootSaga);
export default store;
const loggerMiddleware = createLogger();

每当你调用 action creator 时, redux-logger 会在浏览器控制台中输出相应的日志,显示 action 的类型、旧状态、新状态等信息。

总之, redux-logger 是一个方便的中间件,用于在开发环境中输出有关 Redux 操作的日志,以帮助你更好地理解应用程序的状态变化。

2、自定义中间件

重要的入参:store、next、action

next 是一个函数,用于将 action 继续传递给下一个中间件或最终到达 reducer。

在中间件函数中,你可以执行一些逻辑,然后调用 next(action) 来将 action 传递给下一个中间件或 reducer。

例子:

const myMiddleware = store => next => action => {
  // 在 action 被分发到 reducer 前执行的逻辑
  console.log('Middleware triggered:', action);
  // 将 action 传递给下一个中间件或 reducer
  const result = next(action);
  // 在 action 被分发到 reducer 后执行的逻辑
  console.log('Middleware completed:', action);
  return result;
};

五、一些其他常用方法:(subscribe、connect等等)

1、subscribe

在 Redux 中, subscribe 是一个用于订阅状态变化的方法。

它允许你注册一个回调函数,当 Redux Store 中的状态发生变化时,这个回调函数会被调用,从而你可以执行一些操作来响应状态的变化。

具体来说, subscribe 方法的作用是将一个函数添加到状态变化的监听器列表中,每当状态发生变化时,所有订阅了这个监听器的函数都会被调用。

这样,你可以在状态变化时更新用户界面、执行特定操作等。

store.subscribe(() => console.log(store.getState()))

在上面的例子中, store.subscribe() 方法用于注册一个监听器,每当状态发生变化时,回调函数会被调用并输出当前的状态。通过调用 unsubscribe() 方法,可以取消订阅状态变化,以避免不再需要的监听器持续执行。

总而言之, subscribe 方法在 Redux 中用于监听状态的变化,以便你可以在状态更新时执行相应的操作,如更新界面或触发其他逻辑。

2、connect

connect 是 React Redux 库提供的一个高阶函数(Higher-Order Function),用于连接 React 组件与 Redux Store。它的作用是将 Redux 的状态(state)和操作(actions)与 React 组件进行关联,使得组件能够访问 Redux 中的状态并调用相应的操作来更新状态。

使用 connect 方法,你可以将 Redux Store 中的状态映射到组件的 props 上,以便在组件内部可以直接访问这些状态。同时,你也可以将 Redux 的 Action Creators 映射到组件的 props 上,使得组件可以触发这些操作来分发 action,从而更新 Redux Store 的状态。

connect 方法的基本语法如下:

import { connect } from 'react-redux';
// Connect the component to Redux
const ConnectedComponent = connect(mapStateToProps, mapDispatchToProps)(Component);

其中, mapStateToProps mapDispatchToProps 是两个函数,用于定义如何将 Redux 的状态和操作映射到组件的 props 上。它们的作用分别如下:

通过 connect 方法,你可以实现将 Redux 的状态和操作传递给组件,使得组件能够与 Redux Store 进行交互。这大大简化了组件与状态管理之间的关系,提高了代码的可维护性和可扩展性。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文