ms314006

const reducer = (state = initState, action) => {
    switch (action.type){
        default:
            return state 
    }
}

ms314006

import { createStore } from 'redux'

const store = createStore(reducer)

//可使用 store 的內建函式 getState() 確認目前 store 內所保管的資料console.log(store.getState())  // {name: 'Jack'}

ms314006

const mapStateToProps = state => ({
    name: state.name
})

ms314006

import React from 'react'

class ConnectTitle extends React.Component {
    render(){
        return <h1>Hello!{this.props.name}</h1>
    }
}

ms314006

import { connect } from 'react-redux'

const Title = connect(mapStateToProps)(ConnectTitle)

ms314006

import { connect, Provider } from 'react-redux'
import ReactDOM from 'react-dom'

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

ms314006

const CHANGE_NAME = 'CHANGE_NAME'

ms314006

const changeName = (name) => {
    return {
        type: CHANGE_NAME,
        payload: { 
            name: name 
        },
    }
}

ms314006

const reducer = (state = initState, action) => {
    switch (action.type) {
        case CHANGE_NAME:
            return { 
                ...state, 
                name: action.payload.name 
            }
        default:
            return state
    }

ms314006

const mapDispatchToProps = dispatch => {
    return {
        changeName: name => dispatch(changeName(name))
    }
}