高度再来とアプリケーションの反応-Reduxの再来 - サンク

1.反応し、再来

• 反応-ReduxのReduxのは、公式の結合反応するライブラリです。
• 反応-Reduxのは、コンポーネントがあなたの再来ストアからデータを読み取ることができます反応し、データを更新するアクションを保存するために配布しました。
• 反応-Reduxの再来が構築されていない、個別にインストール。
• Reduxの-Reduxのを反応させ、通常と組み合わせて使用​​。

インストールが反応し、Reduxのを

$ npm install react-redux

プロバイダとの接続

提供-Reduxのが反応<Provider/>コンポーネントは、データReduxのストアにアクセスするためにあなたの全体のアプリを作ることができます。

App.js：

import React, { Component, Fragment } from 'react';
import { Provider } from 'react-redux';
import store from './store';
import Todolist from './Todolist';


class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Fragment>
          <Todolist />
        </Fragment>
      </Provider>
    )
  }
}

export default App;

反応-reduxが提供connectあなたがコンポーネントや店舗を接続することを可能にする方法を。

2つのパラメータは、接続プロセスで定義することができますmapStateToPropsとmapDispatchToProps;

• [MapStateToProps（状態、[ownProps]）：stateProps]（機能）：このパラメータが定義されていない場合、コンポーネントが変更Reduxのストアを監視します。いつでも、限り変更はReduxの店を発生するよう、mapStateToProps関数が呼び出されます。

• [MapDispatchToProps（発送、[ownProps]）：dispatchProps]（オブジェクトまたは関数）：オブジェクトが渡された場合、各関数はオブジェクトで定義されているが、Reduxのアクションクリエータとして定義されたオブジェクト名の方法で処理されます属性名;各メソッドは、新しい関数を返す関数は、パラメータとして戻り値を実行するアクションの作成者の方法を派遣します。これらの特性は、アセンブリの小道具に組み込むことができます。

たとえば、次の成分 中：

import React, { Component } from 'react';
import { connect } from 'react-redux'

class TodoList extends Component {
  render() {
    ... ...
  }
}

// 将store里面的state映射给当前组件，成为组件的props
// 只要 Redux store 发生改变，mapStateToProps 函数就会被调用。该
// 回调函数必须返回一个纯对象，这个对象会与组件的 props 合并
const mapStateToProps = (state) => {
  return {
    inputValue: state.inputValue,
    list: state.list
  }
}

// 将store.dispatch()方法映射到props上
const mapDispatchToProps = (dispatch) => {
  return {
    ChangeInputValue(e) {
      const action = ...
      dispatch(action);
    },
    handleClick() {
      const action = ...
      dispatch(action);
    }
  }
}

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

Reduxの反応するAPIドキュメントを

2. Reduxの-サンク

アクションが発行された後、減速はすぐに状態を計算し、これは、同期と呼ばれ、アクションが非同期で減速し、実行する時間の期間にわたって発行された後。

• Reduxの-サンクは、一般的に使用される非同期アクションReduxのミドルウェアです。Axiosは通常、要求を処理するために使用されます。
• アクションがアクションオブジェクトを返さない関数を作成することができますが、関数を返すReduxの-サンクミドルウェア

Reduxの-サンクの使用

$ npm install redux-thunk

import { createStore, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducer';

const store = createStore(
  reducers,
  applyMiddleware(thunk)
);

export default store;

applyMiddlewares（）メソッドは、ネイティブreduxがミドルウェア機能は、実装に続いて、全てのアレイから構成されています。

中actionCreator.jsで：

// 一般，创建 action 的函数只能返回一个对象
export const initListAction = (list) => {
    return {
        type: constants.INIT_LIST,
        list
    }
}

// ---------------------------

// 使用了 redux-thunk, action函数可以返回一个函数
export const getTodoList = () => {
    return (dispatch) => {
        axios.get('/api/list.json').then(res => {
            const { data } = res;
            const action = initListAction(data);
            dispatch(action);
        })
    }
}

中reducer.jsで：

export default (state = defaultState, action) => {

    ··· ···
    if (action.type === constants.INIT_LIST) {
        let newState = JSON.parse(JSON.stringify(state));
        newState.list = action.list;
        return newState;
    }
    return state;
}

中Todolist.jsで：

componentDidMount () {
  const action = getTodoList();
  // 这里取到的action是一个函数，当执行dispatch时，会自动执行该函数
  store.dispatch(action);
}

3.反応-Reduxのを完全な結合例Reduxの-サンク（todolistの）

https://github.com/caochangkui/todolist-react-redux-thunk