web-dev-qa-db-ja.com

React Reduxでストアの状態にアクセスするにはどうすればいいですか？

私はただreduxと非同期を学ぶための簡単なアプリを作っています。すべてうまくいったので、今度は実際の状態をWebページに表示したいだけです。では、renderメソッドで実際にストアの状態にアクセスするにはどうすればよいでしょうか。

これが私のコードです（私が学んでいるだけなので、すべてが1ページにまとめられています）。

const initialState = {
        fetching: false,
        fetched: false,
        items: [],
        error: null
    }

const reducer = (state=initialState, action) => {
    switch (action.type) {
        case "REQUEST_PENDING": {
            return {...state, fetching: true};
        }
        case "REQUEST_FULFILLED": {
            return {
                ...state,
                fetching: false,
                fetched: true,
                items: action.payload
            }
        }
        case "REQUEST_REJECTED": {
            return {...state, fetching: false, error: action.payload}   
        }
        default: 
            return state;
    }
};

const middleware = applyMiddleware(promise(), thunk, logger());
const store = createStore(reducer, middleware);

store.dispatch({
    type: "REQUEST",
    payload: fetch('http://localhost:8000/list').then((res)=>res.json())
});

store.dispatch({
    type: "REQUEST",
    payload: fetch('http://localhost:8000/list').then((res)=>res.json())
});

render(
    <Provider store={store}>
        <div>
            { this.props.items.map((item) => <p> {item.title} </p> )}
        </div>
    </Provider>,
    document.getElementById('app')
);

だから、状態のレンダリングメソッドで私はストアからすべてのitem.titleをリ​​ストしたいです。

ありがとう

javascriptasynchronousreactjsreduxreact-redux
58
Parkicism

個別のコンポーネントを作成する必要があります。これは状態の変化を監視し、状態が変化するたびに更新されます。

class Items extends Component {
  constructor(props) {
    super(props);

    this.state = {
      items: [],
    };

    store.subscribe(() => {
      // When state will be updated(in our case, when items will be fetched), 
      // we will update local component state and force component to rerender 
      // with new data.

      this.setState({
        items: store.getState().items;
      });
    });
  }

  render() {
    return (
      <div>
        {this.state.items.map((item) => <p> {item.title} </p> )}
      </div>
    );
  }
};

render(<Items />, document.getElementById('app'));
39
1ven

react-reduxからconnectをインポートし、それを使用してコンポーネントを状態connect(mapStates,mapDispatch)(component)に接続します。

import React from "react";
import { connect } from "react-redux";


const MyComponent = (props) => {
    return (
      <div>
        <h1>{props.title}</h1>
      </div>
    );
  }
}

最後にthis.propsでそれらにアクセスするために州を小道具にマッピングする必要があります

const mapStateToProps = state => {
  return {
    title: state.title
  };
};
export default connect(mapStateToProps)(MyComponent);

あなたがマッピングする州だけがpropsを通してアクセス可能になるでしょう

この答えをチェックしてください： https://stackoverflow.com/a/36214059/404056

さらに読むために： https://medium.com/@atomarranger/redux-mapstatetoprops-and-mapdispatchtoprops-shorthand-67d6cd78f132

31
Zakher Masri

ストアの現在の状態を取得するには、 Store.getState() を使用する必要があります。

getState()の詳細については、こちらをご覧ください。 this 短いビデオ。

11
semanser

あなたはgetState以上のことをしたいのです。あなたは店の変化に反応したいのです。

React-reduxを使用していない場合は、これを実行できます。

function rerender() {
    const state = store.getState();
    render(
        <div>
            { state.items.map((item) => <p> {item.title} </p> )}
        </div>,
        document.getElementById('app')
    );
}

// subscribe to store
store.subscribe(rerender);

// do initial render
rerender();

// dispatch more actions and view will update

しかしより良いのはreact-reduxを使うことです。この場合は、前述のようにプロバイダを使用しますが、コンポーネントをストアに接続するには connect を使用します。

5
Brandon

強力なデバッグを実行したい場合は、状態の変化ごとにサブスクライブして、アプリを一時停止して次のように詳細を確認することができます。

store.subscribe( () => {
  console.log('state\n', store.getState());
  debugger;
});

ファイルのcreateStoreを実行する場所に配置してください。

stateオブジェクトをコンソールからクリップボードにコピーするには、次の手順に従います。

  1. Chromeのコンソールでオブジェクトを右クリックして、コンテキストメニューから[グローバル変数として保存]を選択します。変数名としてtemp1のようなものを返します。

  2. Chromeにもcopy()メソッドがあるので、コンソールのcopy(temp1)はそのオブジェクトをあなたのクリップボードにコピーするべきです。

https://stackoverflow.com/a/25140576

https://scottwhittaker.net/chrome-devtools/2016/02/29/chrome-devtools-copy-object.html

あなたはこのようなJSONビューアでオブジェクトを見ることができます： http://jsonviewer.stack.hu/

ここで2つのjsonオブジェクトを比較できます。 http://www.jsondiff.com/

1
Mowzer