Redux学习之路

安装

npm i redux react-redux

概念

redux三部分;Action，Reducer，Store

Action

1） 对用户行为的抽象
2）Action就是一个普通的JavaScript对象，
如：

inc(name, p) {
    return {
      type: "INC",
      name,
      p,
    };
  },

（其中type字段是必须的）
3）作为reducer的参数

Reducer

1）一个普通的函数，用来修改store的状态
2）如：

const initialState = {
  first: 1,
  second: 1,
};

export default (state = initialState, action) => {
  switch (action.type) {
    case "INC":
      var newState = { ...state };
      if (action.p < 0) {
        //t -1
        if (newState[action.name] > 1) {
          newState[action.name] += action.p;
          return newState;
        }
      } else {
        newState[action.name] += action.p;
        return newState;
      }
    default:
      return state;
  }
};

• 在default情况下返回state
  3）redux的combineReducers方法可合并reducer

Store

1）代表数据模型，内部有一个state变量（可以看作是一个存数据的仓库）
2）两个和新方法，分别是getState，dispatch。前者用来获取store的状态（state），后者用来修改store的状态
3）createStore（reducer）可创建store

redux示例

//创建仓库
import { createStore } from "redux";
import reducer from "./reducer";

var store = createStore(reducer);

export default store;


//总的reducer示例
import { combineReducers } from "redux";

import listReducer from "../component/list/reducer";

var reducer = combineReducers({
  list: listReducer,
});

export default reducer;


//组件内reducer示例
const initialState = {
  first: 1,
  second: 1,
};

export default (state = initialState, action) => {
  switch (action.type) {
    case "INC":
      var newState = { ...state };
      if (action.p < 0) {
        //t -1
        if (newState[action.name] > 1) {
          newState[action.name] += action.p;
          return newState;
        }
      } else {
        newState[action.name] += action.p;
        return newState;
      }
    default:
      return state;
  }
};

react-redux

react的需求

• 数据总是单向自上而下分发
• 组件之间沟通通过提升state：子组件改变父组件state的方法只能是通过onClick触发父组件生命好的回调
• react-redux 将react组件分为两种：ui组件和容器组件

ui组件

只负责展示样式
1）数据来源：props
2）数据修改：通过props的回调函数
3）不直接使用redux

容器组件

描述行为，获取及更新数据
1）数据来源：redux state
2）数据修改：redux 派发action
3）直接使用redux
react-redu使用两个API;Provider和connect

Provider

1）在应用组件外包裹，将整个应用编程Provider的子组件
2）接收Redux 的store做诶props，内部通过context对象传递给子孙组织上的connect

import { Provider } from "react-redux";
ReactDOM.render(
  <Provider store={store}>
    <Router>
      <App />
    </Router>
  </Provider>,
  document.getElementById("root")
);

connect

export default connect(state => state)(Shop);

作用：连接接React组件和Redux store
1）将store中的数据作为props绑定到组件上
2）connect是一个高阶组件，参数是要导出的该组件

class List extends Component {
  render() {
    let list = this.props.list.list;
    return (
      <div>
        <ul>
          {list.map((item, index) => {
            return (
              <li key={index}>
                <img src={item.img} />
                <div>
                  <h3>{item.name}</h3>
                  <p>
                    <button>添加购物车</button>
                  </p>
                </div>
              </li>
            );
          })}
        </ul>
      </div>
    );
  }
}

在redux中，我们只能dispatc简单的action对象
相应的在react-redux中，我们只能定义同步的reducer方法

本文借鉴于https://www.cnblogs.com/neverc/p/9071065.html