How to render React Component with data from Redux store

Question

I'm new for the redux, I'm trying to implement a small concept in my react app. I have received the data from dispatch and its in subscribe. How to print subscribe data to the UI. The below code is not working, where is the mistake and how to resolve it.

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

I've change a little bit your code and created a jsfiddle for better understanding.

In short, as you use class you should dispatch action within componentDidMount or some event, not render method. Secondly, I used this.forceUpdate(); to rerender component after state has been changed.

I think you messed up a little bit class based components with function based components .

Here is full working sample and working jsfiddle is here :

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