w23 Redux 補充部分，很多邏輯打包，一樣用反斜線替代資料結構

actions.js

import * as actionTypes from './actionTypes';

export const updateNavText = (text) => {
	return {
		type: actionTypes.UPDATE_NAV_TEXT,
		value: text,
	};
};

export const getPosts = () => ({
	type: actionTypes.GET_POSTS,
});

export const getPostsSuccess = (data) => ({
	type: actionTypes.GET_POSTS_SUCCESS,
	data,
});

actionTypes.js

export const UPDATE_NAV_TEXT = "UPDATE_NAV_TEXT";
export const UPDATE_TEST = "UPDATE_TEST";

export const GET_POSTS = "GET_POSTS";
export const GET_POSTS_SUCCESS = "GET_POSTS_SUCCESS";

App.css

.App {
  text-align: center;
}

.page {
  margin-top: 100px;
}

App.js

import React, { Component } from 'react';
import './App.css';
import Nav from './containers/NavContainer';
import About from './component/about/';
import Home from './containers/HomeContainer';
import PostList from './containers/PostsContainer';
import Post from './component/post';
import { BrowserRouter as Router, Route } from "react-router-dom";

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App" >
          <Nav />
          <div className="page">
            <Route exact path="/" component={Home} />
            <Route exact path="/post" component={PostList} />
            <Route path="/about" component={About} />
            <Route path="/post/:postId" component={Post} />
          </div>
        </div>
      </Router>
    );
  }
}

export default App;

component\about\About.css

.about {
  background: rgba(0, 255, 0 , 0.3);
  min-height: calc(100vh - 74px);
}

.about > div {
  font-size: 36px;
  margin: 10px;
}

component\about\index.js

import React, { Component } from 'react';
import './About.css';

class About extends Component {
  render() {
    return (
      <div className="about">
        <div>About</div>
        <div>hello</div>
      </div>
    );

  }
}

export default About;

component\home\home.css

.homepage {
  font-size: '40px';
  padding-top: '10px';
}

component\home\index.js

import React, { Component } from 'react';
import './home.css';

class Home extends Component {
  render() {
    return (
      <div className="home">
        <div className="homepage">I am homepage</div>
        <button onClick={
          () => {
            this.props.updateNav(Math.random())
          }
        }>click me</button>
      </div>
    );
  }
}

export default Home;

component\nav\index.js

import Nav from './Nav';

export { Nav as default };

component\nav\Nav.css

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #bbbbbb;
  opacity: 0.8;
  z-index: 2;
}

.nav__list {
  list-style: none;
  padding: 0;
  text-align: left;
  margin-left: 20px;
}

.nav__list li {
  display: inline-block;
  margin-right: 16px;
  background: rgba(255, 0, 0, 0.3);
  padding: 10px;
  transition: background 0.3s;
  cursor: pointer;
}

.nav__list a {
  text-decoration: none;
  color: black;
}

.nav__list li:hover {
  background: rgba(255, 0, 0, 0.5);
}

.nav__list .active {
  background: rgba(255, 0, 0, 0.5);
}

component\nav\Nav.js

import React, { Component } from 'react';
import './Nav.css';
import { Link, Route } from "react-router-dom";

class Item extends Component {
  render() {
    const { to, text, exact } = this.props;
    return (
      <Route
        path={to}
        exact={exact}
        children={({ match }) => (
          <Link to={to}>
            <li className={match ? "active" : ""}>
              {text}
            </li>
          </Link>
        )}
      />
    )
  }
}

class Nav extends Component {
  render() {
    return (
      <nav className="nav" >
        <ul className="nav__list">
          <Item to='/' exact={true} text='Home' />
          <Item to='/post' text='文章列表' />
          <Item to='/about' text='關於本站' />
        </ul>
        <div>{this.props.navText}</div>
      </nav>
    );
  }
}

export default Nav;

component\post\index.js

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { getPost } from '../../WebAPI'

class Posts extends Component {
  constructor(props) {
    super(props);
    this.state = {
      post: {},
    }
  }

  componentDidMount() {
    const { postId } = this.props.match.params;
    getPost(postId)
      .then(res => {
        this.setState({
          post: res.data,
        })
      })
  }

  render() {
    const { post } = this.state;
    return (
      <div>
        <h1>POST</h1>
        <Link to="/post"><button> back </button> </Link>
        <div>
          <h1>{post.title ? post.title : 'Loading'}</h1>
          <p>{post.body}</p>
        </div>
      </div>
    );

  }
}

export default Posts;

component\post_list\index.js

import React, { Component } from 'react';
import './Post.css';

class PostList extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.props.getPostList();
  }

  render() {
    const { history, posts } = this.props;
    return (
      <div>
        <h1>POST</h1>
        <div className="post-list">
          {posts.map(post => (
            <div className="post-item" key={post.id}>
              <div className="post-item__id" onClick={() => {
                history.push("/post/" + post.id)
              }}>{post.id}</div>
              <div className="post-item__title"> {post.title}</div>
              <div className="post-item__body">{post.body}</div>
            </div>
          ))}
        </div>
      </div>
    );
  }
}

export default PostList;

component\post_list\Post.css

.post-list {
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  margin-left: 10px;
}

.post-item {
  position: relative;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 0, 0.1);
  margin-right: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}

.post-item__id {
  position: absolute;
  left: 0;
  right: 0;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: red;
}

.post-item__title {
  margin-top: 15px;
  font-size: 30px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

containers\HomeContainer.js

import React from 'react';
import { connect } from 'react-redux';
import Home from '../component/home';
import { updateNavText } from '../actions';

const HomeContainer = (props) => {
  return <Home {...props} />
}

const mapDispatchToPtops = dispatch => {
  return {
    updateNav: text => dispatch(updateNavText(text)),
  }
}

export default connect(null, mapDispatchToPtops)(HomeContainer);

containers\NavContainer.js

import React from 'react';
import { connect } from 'react-redux';
import Nav from '../component/nav/';

const NavContainer = (props) => {
  return <Nav {...props} />
}

const mapStateToProps = state => {
  return {
    navText: state.nav.navText
  }
}

export default connect(mapStateToProps)(NavContainer);

containers\PostsContainer.js

import React from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import Posts from '../component/post_list';
import * as WebAPI from '../WebAPI';
import * as actions from '../actions'

const PostsContainer = (props) => {
  return <Posts {...props} />
}

const mapStateToProps = state => {
  return {
    isLoadingGetPosts: state.nav.isLoadingGetPosts,
    posts: state.nav.posts,
  }
}

const mapDispatchToProps = dispatch => {
  return {
    getPostList: () => {
      dispatch(actions.getPosts())
      WebAPI.getPosts().then(res => {
        dispatch(actions.getPostsSuccess(res.data))
      })
    }
  }
}

export default withRouter(
  connect(mapStateToProps, mapDispatchToProps)(PostsContainer)
);

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { Provider } from 'react-redux';
import { createStore, combineReducers } from 'redux';
import navReducer from './reducer';

const reducers = combineReducers({
  nav: navReducer,
});

const store = createStore(reducers);

ReactDOM.render(
  <Provider store={store}>
    <App name="hugh" />
  </Provider>, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

reducer.js

import * as actionTypes from './actionTypes';

const state = {
  navText: '123',
  isLoadingGetPosts: false,
  posts: [],
}

// [].reduce()
function reducer(globalState = state, action) {
  switch (action.type) {
    case actionTypes.UPDATE_NAV_TEXT:
      return {
        ...globalState,
        navText: action.value,
      };
    case actionTypes.UPDATE_TEST:
      return {
        ...globalState,
        test: action.value,
      };
    case actionTypes.GET_POSTS:
      return {
        ...globalState,
        isLoadingGetPosts: true,
      };
    case actionTypes.GET_POSTS_SUCCESS:
      return {
        ...globalState,
        isLoadingGetPosts: false,
        posts: action.data
      };
    default:
      return globalState;
  }
}

export default reducer;

WebAPI.js

import axios from 'axios';

export const getPosts = () =>
  axios.get('https://jsonplaceholder.typicode.com/posts');

export const getPost = postId =>
  axios.get('https://jsonplaceholder.typicode.com/posts/' + postId);