如何使用Redux存儲中的數據渲染React組件

Question

我是Redux的新手，我正在嘗試在我的react應用程序中實現一個小的概念。 我已經收到來自調度和訂閱中的數據。 如何將訂閱數據打印到UI。 以下代碼不起作用，錯誤在哪里以及如何解決。

import React, { Component } from 'react';
import { createStore } from 'redux';

export default class App1 extends Component {

  render() {

    const initalState={items:
                       [{
                             name:"test"
                       }]
                      };

    // Create Reducer, this is need state and action
    const reducer = function(state,action){
        if(action.type==='POST'){
            return action.payload;
        }
        return state;
    }

    // Create store, this is  need reducer and state
    const store=createStore(reducer,initalState);

    // Subscribe 
    store.subscribe(()=>{
        items: store.getState().items;
    });

    // Dispatch
    store.dispatch({
        type:"POST",
        payload:{
            items:
        [{
        name:"test 1"
    },
    {
        name:"test 2"
    }]
        }
    });

    return (
        <div>
             {this.props.items.map((item) => <p> {item.name} </p> )}
        </div>
    )

  }
}

Answer 1

我對您的代碼做了一些更改，並創建了一個jsfiddle以便更好地理解。

簡而言之，在使用類時 ，應在componentDidMount或某些事件（而不是render方法）內調度操作。 其次，我使用了this.forceUpdate(); 狀態更改后重新呈現組件。

我認為您將基於類的組件與基於函數的組件弄混了。

這是完整的工作示例，正在工作的jsfiddle在這里 ：

const initalState={
    items: [{
      name:"test"
    }]
};

// Create Reducer, this is need state and action
const reducer = function(state,action){
    if(action.type==='POST'){
        return action.payload;
    }
    return state;
}
// Create store, this is  need reducer and state
const store=Redux.createStore(reducer,initalState);

class App1 extends React.Component {

    componentDidMount () {
       // subscribe
        store.subscribe(()=>{
            this.forceUpdate(); // actually triggers component to rerender on subscribe. Note you can also use this.setState() to trigger changes
        });

      // Dispatch
        store.dispatch({
            type:"POST",
            payload: {
              items: [
                {
                  name:"test 1"
                }, 
                {
                    name:"test 2"
                }
            ]
        }
    });
  }

  render() {    
    return (
        store.getState().items.length > 0 &&
        <div>
             {store.getState().items.map((item) => <p> {item.name} </p> )}
        </div>
    )

  }
}

ReactDOM.render(
    <App1 />,
    document.getElementById('container')
);