【輕鬆上手React Redux】實戰教程，掌握狀態管理核心技巧

引言

React Redux 是一個富強的庫，它將 Redux 的狀況管理才能與 React 的組件架構相結合。經由過程利用 React Redux，你可能有效地管理當用的狀況，進步代碼的可保護性跟可測試性。本文將供給一個實戰教程，幫助你輕鬆上手 React Redux，並控制其核心技能。

一、React Redux 簡介

React Redux 是 Redux 的官方 React 綁定庫，它供給了一系列的實用東西，使得在 React 利用中利用 Redux 變得愈加簡單。React Redux 的核心頭腦是將 Redux 的狀況與 React 組件的狀況綁定，從而實近況況的雙向同步。

二、安裝跟設置

起首，你須要安裝 Redux 跟 React Redux。可能經由過程 npm 或 yarn 來安裝：

npm install redux react-redux
# 或許
yarn add redux react-redux

接上去，創建一個 Redux 的 store：

import { createStore } from 'redux';

const initialState = {
  count: 0
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
}

const store = createStore(reducer);

三、連接 React 組件

利用 Provider 組件將 Redux 的 store 注入到 React 利用的頂層，如許任何組件都可能拜訪到 store：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';

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

四、利用 connect 連接組件

利用 connect 高階組件將 Redux 的 state 跟 dispatch 方法連接到 React 組件的 props 中：

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

class Counter extends React.Component {
  render() {
    return (
      <div>
        <p>Count: {this.props.count}</p>
        <button onClick={this.props.increment}>Increment</button>
        <button onClick={this.props.decrement}>Decrement</button>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  count: state.count
});

const mapDispatchToProps = dispatch => ({
  increment: () => dispatch({ type: 'INCREMENT' }),
  decrement: () => dispatch({ type: 'DECREMENT' })
});

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

五、非同步 Action

對須要處理非同步邏輯的情況，可能利用 Redux Thunk 旁邊件來處理非同步 action：

import thunk from 'redux-thunk';
import { createStore } from 'redux';

const store = createStore(reducer, applyMiddleware(thunk));

// 非同步 action creator
function fetchData() {
  return dispatch => {
    dispatch({ type: 'FETCH_DATA_REQUEST' });
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data }))
      .catch(error => dispatch({ type: 'FETCH_DATA_FAILURE', error }));
  };
}

六、總結

經由過程以上實戰教程，你現在曾經控制了 React Redux 的基本利用方法。React Redux 的富強之處在於它可能幫助你以可猜測的方法管理當用的狀況，從而進步代碼的可保護性跟可測試性。在現實項目中，你可能根據須要進一步擴大年夜 Redux 的功能，比方利用 Redux Saga 或 Redux Toolkit 來簡化非同步邏輯的處理。