react学习--react-redux的使用

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 (
    
      

        
Redux Counter App
        
      
    
  );
}

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 (
    

      
Counter: {counter}
      Increment
      Decrement
    
  );
}

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 (
      

        
Counter: {this.props.counter}
        Increment
        Decrement
      
    );
  }
}

// 定义 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())

9、 redux开发者工具包

配置项目代码，由1变成2。可以查看状态管理

10、出现了react-redux持久化redux-persist