redux - helloworld - PttPosts

Install react and react-redux

npm install --save react react-redux

src/actions/index.js

export const selectPttPost = pttPost => {

    return {

        type: "PTT_POST_SELECTED", //required attribute

        payload: pttPost

    };

};

src/components/PttPosts.js

import React, {Component} from "react";

import {connect} from 'react-redux'

class PttPosts extends Component {

    render() {

        console.log("render")

        return <div>PttPosts</div>

    }

}

const mapStateToProps = (state) => {

    console.log(state)

    return state;

}

export default connect(mapStateToProps)(PttPosts)

src/reducers/index.js

import { combineReducers } from 'redux';

export const pttPostsReducer = () => {

    return [

        {title:'Article AAAA', author:"author AAA"},

        {title:'Article BBBB', author:"author BBB"},

        {title:'Article CCCC', author:"author CCC"},

        {title:'Article DDDD', author:"author DDD"},

    ];

};

export const selectedPttPostReducer = (selectedPttPost = null, action) => {

     if (action.type === 'PTT_POST_SELECTED') {

        return action.payload;

     }

     return selectedPttPost;

}

export default combineReducers({

    pttPosts: pttPostsReducer,

    selectedPttPost: selectedPttPostReducer

})

src/App.js

import React from 'react';

import PttPosts from "./components/PttPosts";

function App() {

  return (

    <div>

      <PttPosts />

    </div>

  );

}

export default App;

src/index.js

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

import {createStore} from 'redux'

import { Provider } from 'react-redux'

import reducers from './reducers' // Can't use {reducers}

ReactDOM.render(

      <Provider store={createStore(reducers)} >

          <App />,

      </Provider>,

  document.getElementById('root')

);