Redux入门与创建使用方法

redux就是一个"状态管理器"。 跟 Vuex 很相似，但又不同于 Vuex。

三大原则：

• 单一数据源- 整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。

• state 是只读的- 唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。

• 使用纯函数来执行修改- 为了描述 action 如何改变 state tree ，你需要编写 reducers

开始实例：

创建react项目：

 

 转到demo下安装react-redux和redux-toolkit

redux-toolkit使得redux安装更方便

1. npm install @reduxjs/toolkit

2. npm install react-redux

 新建文件创建redux

 

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

const store = createStore(reducers);

export default store;

// /src/redux/action/index.js
export const actionTypes = {
    ADD_TEST: 'ADD_TEST',
  };

// /src/redux/reducers/index.js
import { actionTypes } from './../action';

const initialState = {
  number: 11,
};

export default (state = initialState, action) => {
  switch (action.type) {
    case actionTypes.ADD_TEST:
      return {
        ...state,
        number: action.number + 1
      };
    default:
      return state;
  }
}

react与redux连接

1.使用Provider包裹项目根目录

 

2 在项目中使用redux

2.1 通过dispatch修改store数据

通过dispatch触发store数据的改变

2.2 获取store中的数据

通过connect将export default App修改为 export default connect(mapStateToProps)(App); 即可通过this.props 获取到store中数据

使用redux总结

1.创建redux

1. 创建store；
2. 创建action；
3. 创建reducers；

2.创建react

1. Provider包裹跟组件， 制定store={store};
2. connect 连接业务组件，通过dispatch修改，mapStateToProps获取;