Tutorial React Redux: Cara menggunakan Redux untuk mengurus keadaan bahagian hadapan-tutorial js-php.cn

Tutorial React Redux: Cara menggunakan Redux untuk mengurus keadaan bahagian hadapan

WBOY

Lepaskan： 2023-09-26 11:33:05

asal

660 orang telah melayarinya

React Redux教程：如何使用Redux管理前端状态

Tutorial React Redux: Cara menggunakan Redux untuk mengurus keadaan bahagian hadapan
React ialah perpustakaan JavaScript yang sangat popular untuk membina antara muka pengguna. Dan Redux ialah perpustakaan JavaScript untuk mengurus keadaan aplikasi. Bersama-sama mereka membantu kami mengurus keadaan bahagian hadapan dengan lebih baik. Artikel ini akan memperkenalkan cara menggunakan Redux untuk mengurus keadaan dalam aplikasi React dan memberikan contoh kod khusus.

1 Pasang dan sediakan Redux

Pertama, kita perlu memasang Redux dan React Redux. Jalankan arahan berikut dalam direktori projek untuk memasang dependensi:

npm install redux react-redux

Salin selepas log masuk

Selepas pemasangan selesai, kita perlu menyediakan kedai Redux. Dalam direktori akar projek, buat fail store.js dan tambahkan kod berikut: store.js文件，并添加以下代码：

import { createStore } from 'redux';

// 初始状态
const initialState = { count: 0 };

// Reducer函数
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;
  }
}

// 创建store
const store = createStore(reducer);

export default store;

Salin selepas log masuk

这段代码创建了一个初始状态为{ count: 0 }的store，同时定义了一个reducer函数来处理状态的变化。当我们的应用需要增加计数器时，可以发送一个{ type: 'INCREMENT' }的action，减少计数器时发送{ type: 'DECREMENT' }的action。

二、将Redux集成到React应用中

接下来，在我们的React应用中将Redux集成进来。在根目录下的index.js文件中添加以下代码：

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

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

Salin selepas log masuk

这段代码使用了React Redux提供的Provider组件，将Redux的store传递给了应用的根组件App，这样一来，我们就可以在任何需要读取或修改状态的组件中使用Redux。

三、在组件中使用Redux

现在，我们可以在组件中使用Redux来管理状态了。接下来，我们将创建一个Counter组件，用于展示计数器状态，并提供按钮来增加和减少计数器的值。在项目根目录下创建Counter.js文件，并添加以下代码：

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

class Counter extends React.Component {
  increment = () => {
    this.props.dispatch({ type: 'INCREMENT' });
  };

  decrement = () => {
    this.props.dispatch({ type: 'DECREMENT' });
  };

  render() {
    return (
      <div>
        <h1>计数器：{this.props.count}</h1>
        <button onClick={this.increment}>增加</button>
        <button onClick={this.decrement}>减少</button>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return { count: state.count };
}

export default connect(mapStateToProps)(Counter);

Salin selepas log masuk

这段代码展示了如何将Redux状态映射到组件的属性，以及如何在组件中派发action。通过调用connect函数并传递mapStateToProps函数，我们可以将Redux store中的{ count: 0 }映射到组件的this.props.count属性中。这样一来，当我们的应用状态发生变化时，组件将会自动更新。

最后，在应用的根组件App.js中添加Counter

import React from 'react';
import Counter from './Counter';

class App extends React.Component {
  render() {
    return <Counter />;
  }
}

export default App;

Salin selepas log masuk

Kod ini mencipta keadaan awal { count: 0 Kedai } juga mentakrifkan fungsi pengurang untuk mengendalikan perubahan keadaan. Apabila aplikasi kami perlu meningkatkan kaunter, ia boleh menghantar tindakan { type: 'INCREMENT' }, dan apabila ia perlu mengurangkan kaunter, ia boleh menghantar tindakan { type : 'PENURUSAN' }.

2. Integrasikan Redux ke dalam aplikasi React

Seterusnya, integrasikan Redux ke dalam aplikasi React kami. Tambahkan kod berikut pada fail index.js dalam direktori akar:

rrreee

Kod ini menggunakan komponen Provider yang disediakan oleh React Redux to The Stor Redux dihantar ke komponen akar aplikasi App, supaya kami boleh menggunakan Redux dalam mana-mana komponen yang perlu membaca atau mengubah suai keadaan. #🎜🎜##🎜🎜#3 Gunakan Redux dalam komponen#🎜🎜##🎜🎜#Kini, kita boleh menggunakan Redux dalam komponen untuk menguruskan keadaan. Seterusnya, kami akan mencipta komponen Counter yang memaparkan status kaunter dan menyediakan butang untuk menambah dan mengurangkan nilai kaunter. Cipta fail Counter.js dalam direktori akar projek dan tambahkan kod berikut: #🎜🎜#rrreee#🎜🎜#Kod ini menunjukkan cara memetakan keadaan Redux kepada sifat komponen dan cara untuk Menghantar tindakan dalam komponen. Dengan memanggil fungsi connect dan menghantar fungsi mapStateToProps, kami boleh memetakan { count: 0} dalam stor Redux kepada harta .props.countini. Dengan cara ini, apabila keadaan aplikasi kami berubah, komponen akan dikemas kini secara automatik. #🎜🎜##🎜🎜#Akhir sekali, tambahkan komponen Counter pada komponen root aplikasi App.js: #🎜🎜#rrreee#🎜🎜#Sekarang, aplikasi The React Redux kami telah dikonfigurasikan. Apabila kami membuka aplikasi, kami akan melihat komponen pembilang, dan kami boleh menambah atau menurunkan nilai pembilang dengan mengklik pada butang. #🎜🎜##🎜🎜#Ringkasan: #🎜🎜##🎜🎜#Artikel ini memperkenalkan cara menggunakan Redux untuk mengurus keadaan bahagian hadapan dalam aplikasi React dan menyediakan contoh kod khusus. Dengan memasang dan menyediakan Redux, dan kemudian menyepadukan Redux ke dalam aplikasi React, kami boleh mengurus dan mengemas kini keadaan aplikasi dengan mudah. Saya harap artikel ini akan membantu anda memahami penggunaan React Redux! #🎜🎜#

Atas ialah kandungan terperinci Tutorial React Redux: Cara menggunakan Redux untuk mengurus keadaan bahagian hadapan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!