Reduxサンプルコード集

formを作成してlogを出す,③nameの文字数が３文字以上の時のみsaveボタンを押してlogを出す

▼Content.js

        let save_disabled = true;
        if (props.formData.conditions.name.length >= 3 ){
                save_disabled = false;
            }
        return (
            <div>
                <div>
                    <InputId   onClickButtonId = {props.onClickButtonId}/>
                    <InputName   onClickButtonName = {props.onClickButtonName}/>
                    <button type="button"
                        className="btn btn-outline-success"
                        disabled = { save_disabled }
                        onClick={(e) => props.onSaveItem()} >
                        SAVE
                    </button>
                </div>
            </div>
        );
    // input_id
    function InputId(props) {
        return (
            <div className="form-group">
                <label >ID</label>
                <input id="1"
                    type="text"
                    className="form-control"
                    onChange={(e) => props.onClickButtonId(e)}
                    />
            </div>
        )
    }
    // input_name
    function InputName(props) {
        return (
            <div className="form-group">
                <label>Name</label>
                <input id="2"
                    type="text"
                    className="form-control"
                        onChange={(e) => props.onClickButtonName(e)}
                />
            </div>
        )
    }

▼src/Appjs

        class App extends Component {
            constructor(props) {
                super(props);
            }
            // form_id
            onClickButtonId = (e) => {
                this.props.formID(e.target.value);
            }
            // form_name
            onClickButtonName = (e) => {
                this.props.formName(e.target.value);
            }
            onSaveItem = (e) => {
                console.log("SAVE_ID: ",this.props.conditions.id);
                console.log("SAVE_NAME: ",this.props.conditions.name);
            }
            render() {
                // form
                const contentHandler = ({ onClickButtonId, onClickButtonName,onSaveItem}) => ({ onClickButtonId, onClickButtonName,onSaveItem})
                return (
                    <div >
                        ⑥redux編
                        <div className="main">
                            <div className="container">
                                <Top />
                                <Content {...contentHandler(this)} formData={this.props}/>
                            </div>
                        </div>
                    </div>
                );
            }
        }

▼containers/Appjs

        import { connect } from 'react-redux';
        import * as actions from '../actions';
        import App from '../App';
        const mapStateToProps = state => {
            const  {conditions} = state;
            return {conditions}
        }
        const mapDispatchToProps = dispatch => {
            return {
                // form_id,name
                formID: (value) => dispatch(actions.formID(value)),
                formName: (value) => dispatch(actions.formName(value))
            }
        }
        export default connect(mapStateToProps, mapDispatchToProps)(App)

▼src/actions.js

        export const formID = (value) => {
            return {
                type: 'FORM_ID',
                payload: { value }
            };
        }
        export const formName = (value) => {
            return {
                type: 'FORM_NAME',
                payload: { value }
            };
        }

▼src/createStore.js

        import { createStore as reduxCreateStore, combineReducers } from "redux";
        import { conditions } from "./reducers";
        export default function createStore() {
            const store = reduxCreateStore(
                combineReducers({
                    conditions
                })
            );
            return store;
        }
    ex)src/reducres.js
        'use strict';
        const initialState = {
            id: "",
            name: ""
        }
        export function conditions(state = initialState, action) {
            let newState = JSON.parse(JSON.stringify(state));
            switch (action.type) {
                case 'FORM_ID':
                    newState.id = action.payload.value;
                    break;
                case 'FORM_NAME':
                    newState.name = action.payload.value;
                    break;
                default:
                    return state;
            }
            console.log(newState);
            return newState;
        };