React Redux Sample1 (Under construction)

Posted by mayuyu48 On 1月 10, 2018 0 Comment

React Redux

Redux roles

Name	Role
Action
Reducer
View
Store

Sample

This Sample is simple implementation to test Redux.
Prepare one text input and press button and other div shows result.

Preparation

Prepare project directory and some npm settings.

mkdir reduxsample
cd reduxsample
npm init --yes
npm install --save react react-dom react-redux redux
npm install --save-dev webpack webpack-dev-server babel-core babel-loader babel-preset-es2015 babel-preset-react

※ I tried webpack-dev-server-2.10.x but not working, I changed 2.9.x and it works.

webpack.config.js

This is webpack settings

const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve('dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        options: {
          presets: ['es2015', 'react']
        }
      }
    ]
  }
};

Project structure

This is a sample project structure.

reduxsample
|- index.html
|- webpack.config.js
|- index.js
|- view.js
|- reducer.js
|- action.js

index.html

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div id="root"></div>
    <script src="/bundle.js"></script>
  </body>
</html>

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import formReducer from './reducer.js';
import AppContainer from './view.js';

/* Store */
const initialState = {
    value: ''
};
const store = createStore(formReducer, initialState);

ReactDOM.render(
  <Provider store={store}>
    <AppContainer />
  </Provider>,
  document.getElementById('root')
);

reducer.js

/* Reducer */
export default function formReducer(state, action) {
  switch(action.type) {
    case 'ACTION':
      return Object.assign({}, state, {
        value: action.value
      });
    default:
      return state;
  }
}

action.js

/* Action */
const ACTION = 'ACTION'

// Action Creators
function action(value) {
  return {
    type: ACTION,
    value
  };
}
export default action;

view.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import action from './action.js';

/* View */
class FormApp extends Component {

 constructor(props) {
   super(props);
   this.state = {
     value: ''
   };
 }

 send(e) {
   e.preventDefault();
   this.props.onClick(this.state.value);
    this.setState({value: ''});
 }

 textChange(e) {
   this.setState({value: e.target.value});
 }

 render() {
    return (
      <div>
        <input type="text" value={this.state.value} onChange={(event) => this.textChange(event)} />
        <button onClick={(event) => this.send(event)}>Send</button>
        <div>{this.props.value}</div>
      </div>
    );
  }
}

// Connect to Redux
function mapStateToProps(state) {
  return {
    value: state.value,
  };
}
function mapDispatchToProps(dispatch) {
  return {
    onClick(value) {
      dispatch(action(value));
    },
  };
}
const AppContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(FormApp);

export default AppContainer;

Run

Run with webpack-dev-server

webpack-dev-server

You can access http://localhost:8080/index.html

Ref

React+Reduxを手っ取り早く試してみたい人向けのなるべく小さいサンプル
 Reduxの実装とReactとの連携を超シンプルなサンプルを使って解説

TOPICS