Reduxを始める

まずReact.js&webpack&babelから
#################
$ npm init
$ npm install –save-dev webpack webpack-cli webpack-dev-server
$ npm install –save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader
$ npm install –save-dev react react-dom
$ npm install –save-dev @babel/plugin-proposal-class-properties

.babelrc作成

1
2
3
4
5
{
    "plugins": [
        "@babel/plugin-proposal-class-properties"
    ]
}

webpack.config.jsの作成
srcディレクトリの作成
#################

ここから、Reduxを使い始めたい。
公式に沿ってやっていく。(https://redux.js.org/introduction/getting-started）

npm i react-redux

1
2
$ npm install --save-dev react-redux
$ npm install --save-dev redux

basic example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { createStore } from 'redux'
 
function counter(state = 0, action){
    swtich(action.type){
        case 'INCREMENT':
            return state + 1
        case 'DECREMENT':
            return state - 1
        default:
            return state
    }  
}
 
let store = createStore(counter)
 
store.subscribe(() => console.log(store.getState()))
 
store.dispatch({ type: 'INCREMENT' })
store.dispatch({ type: 'INCREMENT' })
store.dispatch({ type: 'INCREMENT' })

createStoreで状態遷移を管理？
全体の動きがよくわからんな。。