準備
mkdir practice-redux && cd $_ mkdir src www npm init -f npm install --save-dev webpack webpack-dev-server npm install --save-dev babel-core babel-loader babel-preset-es2015 npm install --save-dev babel-preset-stage-0 babel-polyfill npm install --save-dev babel-preset-react
create webpack.config.js:
const path = require('path'); const webpack = require('webpack'); module.exports = { entry: [path.resolve('src/app.js')], output: { path: path.resolve('www'), filename: 'bundle.js', }, devtool: 'inline-source-map', devServer: { contentBase: path.resolve('www'), port: 3000, hot: false, inline: true, colors: true }, resolve: { extensions: ['', '.js'], }, module: { loaders:[ { test: /\.js$/, exclude: /node_modules/, loader: 'babel' }, ] } };
create .babelrc:
{ "presets": ["react", "es2015", "stage-0"] }
create src/app.js
sayHello(); function sayHello(word = 'hello') { console.log(word); }
implement it.
$(npm bin)/webpack && node www/bundle.js hello
開始
install redux
npm install --save redux
update src/app.js:
import { createStore } from 'redux' /** * This is a reducer, a pure function with (state, action) => state signature. * It describes how an action transforms the state into the next state. * * The shape of the state is up to you: it can be a primitive, an array, an object, * or even an Immutable.js data structure. The only important part is that you should * not mutate the state object, but return a new object if the state changes. * * In this example, we use a `switch` statement and strings, but you can use a helper that * follows a different convention (such as function maps) if it makes sense for your * project. */ function counter(state = 0, action) { switch (action.type) { case 'INCREMENT': return state + 1 case 'DECREMENT': return state - 1 default: return state } } // Create a Redux store holding the state of your app. // Its API is { subscribe, dispatch, getState }. let store = createStore(counter) // You can use subscribe() to update the UI in response to state changes. // Normally you'd use a view binding library (e.g. React Redux) rather than subscribe() directly. // However it can also be handy to persist the current state in the localStorage. store.subscribe(() => console.log(store.getState()) ) // The only way to mutate the internal state is to dispatch an action. // The actions can be serialized, logged or stored and later replayed. store.dispatch({ type: 'INCREMENT' }) // 1 store.dispatch({ type: 'INCREMENT' }) // 2 store.dispatch({ type: 'DECREMENT' }) // 1
implement it.
$(npm bin)/webpack && node www/bundle.js 1 2 1
続きは WEB で http://redux.js.org/