Router Demo

Action

import {v4} from 'uuid';
import Constants from "../constants";

export const addItem = (title, color) => ({
    type: Constants.ADD_ITEM,
    id: v4(),
    title,
    color
})

funcs

import {compose} from "redux";

const getFirstArrayItem = array => array[0]

const filterArrayById = (array, id) =>
    array.filter(item => item.id === id)

export const findById = compose(
    getFirstArrayItem,
    filterArrayById
)

Reducers

import Constants from "../constants";

const item = (state = {}, action) => {
    switch (action.type) {
        case Constants.ADD_ITEM:
            return {
                id: action.id,
                title: action.title,
                color: action.color
            }
        default:
            return state;
    }
}

export const items = (state = [], action) => {
    switch (action.type) {
        case Constants.ADD_ITEM:
            return [
                ...state,
                item({}, action)
            ]
        default:
            return state;
    }
}

Stores

import {createStore, combineReducers} from "redux";
import {items} from "../reducers";

const store = createStore(combineReducers({items}));

export default store;

Constants

const Constants = {
    ADD_ITEM: 'ADD_ITEM'
}

export default Constants;

AddItemForm

import React from 'react';
import {connect} from 'react-redux';
import {addItem} from "./actions";

const AddItemForm = ({redux_addItem}) => {

    let title, color;

    const submit = e => {
        e.preventDefault();
        redux_addItem(title.value, color.value);
        title.value = '';
        color.value = '';
        title.focus();
    }

    return (
        <form onSubmit={submit}>
            <input type="text"
                   ref={input => title = input}/>
            <input type="color"
                   ref={input => color = input}/>
            <button>ADD</button>
        </form>
    )
}

function mapDispatchToProps(dispatch) {
    return {
        redux_addItem: (title, color) => {
            dispatch(addItem(title, color))
        }
    }
}

export default connect(
    null,
    mapDispatchToProps
)(AddItemForm);

ItemList

import React from 'react';
import Item from "./Item";
import {connect} from "react-redux";

const ItemList = ({items}) => {
    return (
        <ul>
            {
                items.length === 0 ?
                    <p>No Item List. (Add a Item)</p> :
                    items.map((item, index) =>
                        <Item key={item.id}
                              {...item}/>
                    )
            }
        </ul>
    )
}

export default connect(
    (state)=> ({items: state.items}),
    null
)(ItemList);

Item

import React from 'react';
import {withRouter} from "react-router-dom";

const Item = ({id, title, history}) => {
    return (
        <li
            onClick={() => history.push(`/${id}`)}>
            {title}
        </li>
    )
}

export default withRouter(Item);

ItemDetial

import React from 'react';
import {connect} from "react-redux";
import {findById} from "./funcs";

const ItemDetail = ({title, color, history}) => {
    return (
        <div style={{
            height: 100,
            width: 200,
            backgroundColor: color
        }}
             onClick={() => history.goBack()}>
            <h1>{title}</h1>
            <h1>{color}</h1>
        </div>
    )
}

export default connect(
    (state, props) => findById(
        state.items,
        props.match.params.id
    )
)(ItemDetail)

App

import React from 'react';
import {Switch, Route} from 'react-router-dom';
import AddItemForm from "./AddItemForm";
import ItemList from "./ItemList";
import ItemDetail from "./ItemDetail";

const App = () => {

    return (
        <Switch>
            <Route extra path="/:id" component={ItemDetail}/>
            <Route path="/"
                   component={() => (
                       <div>
                           <AddItemForm/>
                           <ItemList/>
                       </div>
                   )}/>
        </Switch>
    )

}

export default App;

Index

import React from 'react';
import {render} from "react-dom";
import store from "./chapter11-router-test01/stores";
import {HashRouter} from "react-router-dom";
import {Provider} from "react-redux";
import App from "./chapter11-router-test01/App";

render(
    <Provider store={store}>
        <HashRouter>
            <App/>
        </HashRouter>
    </Provider>,
    document.getElementById('root')
)