Redux和React-Redux_redux state.rootapp-CSDN博客

Redux

Redux三个基本原则：
1，整个应用只有唯一一个可信数据源，也就是只有一个 Store
2，State 只能通过触发 Action 来更改
3，State 的更改必须写成纯函数，也就是每次更改总是返回一个新的 State，在 Redux 里这种函数称为 Reducer
Actions
Action 很简单，就是一个单纯的包含 { type, payload } 的对象，type 是一个常量用来标示动作类型，payload 是这个动作携带的数据。Action 需要通过 store.dispatch() 方法来发送。
比如一个最简单的 action：

{
  type: 'ADD_TODO',
  text: 'Build my first Redux app'
}

Reducers
Reducer 用来处理 Action 触发的对状态树的更改。
所以一个 reducer 函数会接受 oldState 和 action 两个参数，返回一个新的 state：(oldState, action) => newState。一个简单的 reducer 可能类似这样：

const initialState = {
  a: 'a',
  b: 'b'
};

function someApp(state = initialState, action) {
  switch (action.type) {
    case 'CHANGE_A':
      return { ...state, a: 'Modified a' };
    case 'CHANGE_B':
      return { ...state, b: action.payload };
    default:
      return state
  }
}

Store
现在有了 Action 和 Reducer，Store 的作用就是连接这两者，Store 的作用有这么几个：
1，Hold 住整个应用的 State 状态树
2，提供一个 getState() 方法获取 State
3，提供一个 dispatch() 方法发送 action 更改 State
4，提供一个 subscribe() 方法注册回调函数监听 State 的更改
创建一个 Store 很容易，将 root reducer 函数传递给 createStore 方法即可：

import { createStore } from 'redux';
import someApp from './reducers';
let store = createStore(someApp);

现在我们就拿到了 store.dispatch，可以用来分发 action 了：

let unsubscribe = store.subscribe(() => console.log(store.getState()));

// Dispatch
store.dispatch({ type: 'CHANGE_A' });
store.dispatch({ type: 'CHANGE_B', payload: 'Modified b' });

// Stop listening to state updates
unsubscribe();

Data Flow
以上提到的 store.dispatch(action) -> reducer(state, action) -> store.getState() 其实就构成了一个“单向数据流”，我们再来总结一下。
1.调用store.dispatch(action)
Action 是一个包含 { type, payload } 的对象，它描述了“发生了什么”，比如：

{ type: 'LIKE_ARTICLE', articleID: 42 }
{ type: 'FETCH_USER_SUCCESS', response: { id: 3, name: 'Mary' } }
{ type: 'ADD_TODO', text: 'Read the Redux docs.' }

你可以在任何地方调用 store.dispatch(action)，比如组件内部，Ajax 回调函数里面等等。
2.Action 会触发给 Store 指定的 root reducer
root reducer 会返回一个完整的状态树，State 对象上的各个字段值可以由各自的 reducer 函数处理并返回新的值。
–reducer 函数接受 (state, action) 两个参数
–reducer 函数判断 action.type 然后处理对应的 action.payload 数据来更新并返回一个新的 state
3.Store 会保存 root reducer 返回的状态树
新的 State 会替代旧的 State，然后所有 store.subscribe(listener) 注册的回调函数会被调用，在回调函数里面可以通过 store.getState() 拿到新的 State。

React-Redux

React-Redux是Redux的官方React绑定库。它能够使你的React组件从Redux store中读取数据，并且向store分发actions以更新数据。
React-Redux提供了两个API：Provider和connect
React-Redux 提供<Provider/>组件，能够使你的整个app访问到Redux store中的数据：

import React from "react";
import ReactDOM from "react-dom";

import { Provider } from "react-redux";
import store from "./store";

import App from "./App";

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

React-Redux提供一个connect方法能够让你把组件和store连接起来。
通常你可以以下面这种方式调用connect方法：

import { connect } from "react-redux";
import { increment, decrement, reset } from "./actionCreators";

// const Counter = ...

const mapStateToProps = (state /*, ownProps*/) => {
  return {
    counter: state.counter
  };
};

const mapDispatchToProps = { increment, decrement, reset };

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