react学习--react-redux的使用_react redux 使用 storejs-CSDN博客

本文链接：https://blog.csdn.net/m0_56770663/article/details/134802081

Redux 的核心思想是通过一个单一的状态树来管理应用的状态，状态的修改通过纯函数（reducers）来进行，从而使状态变化可追踪和可预测。

1、安装 Redux：

在项目中安装 Redux 库和 React-Redux（用于 React 绑定的库）。

npm install redux react-redux

2、创建 Redux store：

在应用的入口文件中创建 Redux store。这个 store 将包含整个应用的状态。

// store.js
import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

export default store;

3、创建 Reducers：

创建一个或多个 reducers，每个 reducer 负责处理不同部分的应用状态。Reducers 是纯函数，接收当前状态和一个 action，并返回新的状态。

// reducers.js
const initialState = {
  counter: 0,
};

const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, counter: state.counter + 1 };
    case 'DECREMENT':
      return { ...state, counter: state.counter - 1 };
    default:
      return state;
  }
};

export default rootReducer;

4、创建 Action Creators：

创建 action creators，它们是返回包含 type 属性的对象的函数。这些对象描述了状态的变化。

// actions.js
export const increment = () => ({
  type: 'INCREMENT',
});

export const decrement = () => ({
  type: 'DECREMENT',
});

5、连接 React 组件：

使用 react-redux 库中的 Provider 组件将 Redux store 连接到 React 应用，然后使用 connect 函数将组件与 Redux store 关联。

// App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import Counter from './Counter';

function App() {
  return (
    <Provider store={store}>
      <div>
        <h1>Redux Counter App</h1>
        <Counter />
      </div>
    </Provider>
  );
}

export default App;

6、在组件中使用 Redux 状态：

使用 connect 函数将组件连接到 Redux store，并通过 mapStateToProps 和 mapDispatchToProps 将状态和 action creators 映射到组件的 props。

函数组件

// Counter.js
import React from 'react';
import { connect } from 'react-redux';
import { increment, decrement } from './actions';

function Counter({ counter, increment, decrement }) {
  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

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

const mapDispatchToProps = {
  increment,
  decrement,
};

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

类组件

// MyComponent.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { increment, decrement } from './actions';

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

// 定义 mapStateToProps 函数，将 Redux 的状态映射到组件的 props
const mapStateToProps = (state) => {
  return {
    counter: state.counter,
  };
};

// 定义 mapDispatchToProps 对象，将 action creators 映射到组件的 props
const mapDispatchToProps = {
  increment,
  decrement,
};

// 使用 connect 函数连接 mapStateToProps 和 mapDispatchToProps 到组件
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

7、拆分与合并reducer

8、 redux-thunk

redux的 dispath只能传递为对象，不能传递函数

如果需要传递函数，需要使用中间件；redux-thunk (store.dispatch参数可以是一个function)

import thunk from 'redux-thunk';
import {applyMiddleware} from "redux";
const store = createStore(reducer, applyMiddleware(thunk));
const  getComingSoon = ()=>{
 //进行异步请求
return (dispatch, store) => {
  axios.get().then((res) => {
    console.log(res)
    dispatch({
      type:"fun",
      payload:res.data
    })
  });
};

dispatch(getComingSoon())