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

Question

私は単純なアプリをreduxと非同期で学習するようにしています。私はすべての作業を行っている、今私はちょうど実際の状態をWebページに表示したい。レンダリングメソッドで実際にストアの状態にアクセスするにはどうすればよいですか？状態のrenderメソッドでは、私はストアからすべてのitem.titleをリストしたい、

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') 
); 

ので：

は、ここに私のコード（私はちょうど学んでいるので、すべてが1ページである）です。あなたがあなたのストアの現在の状態を取得するためにStore.getState()を使用する必要が

おかげ

Answer 1

あなたは状態の変化に耳を傾け、すべての状態変化を上に更新される、別のコンポーネントを作成する必要があります。

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')); 

Answer 2

。

getState()の詳細については、thisをご覧ください。

Answer 3

あなただけgetState以上のものをやりたいです。ストア内の変更に対応したい。あなたが反応し、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 

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