react 中 redux

本文通過一個實例來說明redux 的使用方法及流程：

實現內容：1.拿store中的state的數據顯示title  2.調用dispatch 方法 ，修改state裏面的內容.

創建store文件夾，文件夾內創建（index.js，reducer.js，action.js）,

1.index.js

import {createStore,applyMiddleware} from 'redux'
import userReducer from './reducer'
import thunk from 'redux-thunk'

//創建store單一數據源，整個應用的 state 被儲存在一棵 object tree 中，並且這個 object tree 只存在於唯一一個 store 中。
let store = createStore(
    userReducer,
    applyMiddleware(thunk)
  )
  
export default store

2.reducer.js

//默認state
let defaultState = {
    title: 'hello world'
}
export default (state = defaultState, action = {})=>{
    //reducer通過action的type，進行處理返回新的state
    if(action.type === 'set_title'){
        return Object.assign({},{title:action.value})
    }


    return state;
}

3.action.js

//每個action 必須有一個 type ，從而標註需要做什麼操作
export const setTitle = (title)=>{
    return{
        type: 'set_title',
        value: title
    }
}

4.視圖層 ，調用store中的state和action，修改頁面顯示內容

import React from 'react';
import {connect} from 'react-redux';
import {setTitle} from './action'


class Header extends React.Component{

    render(h) {
        return(
            
            <div className="header-panel">
                <span> {this.props.title} </span>
                <button  onClick={()=>{this.props.setTitle('好玩')}}> 測試</button>
            </div>
        )
    }
}

//獲取store中state裏面的值，賦值給當前視圖所需元素
const mapStateToProps=(state) => {
    return {
       //當前title 等於store中state的title
        title: state.title
    }
}

//dispatch調用action方法，觸發reducer從而返回新的state,state更新
const mapDispatchToProps=(dispatch) =>{
    return {
        setTitle: (title)=> dispatch(setTitle(title))
    }
}

//通過connect連接store和視圖
export default connect(()=>mapStateToProps,mapDispatchToProps)(Header);

 

5.必須要在外層Provider，纔可以使store在視圖呢共享從而使用

         1.在App.js 內引入Provider，2 <Provider store={store}></Provider>

App.js

import React, { Component } from 'react';
import { Route,HashRouter } from 'react-router-dom';
import './App.css';
import routes from './route/route.js';
import {Provider} from 'react-redux';
import store from './store'


class App extends Component {
  render() {
    return (
      <Provider store={store}>
      //中間是路由可以去掉
      <HashRouter>
        <div className="App">
        {
              routes.map((route,key)=>{
                return <Route  key={key} exact path={route.path}  
                render={props => (
                  <route.component {...props} routes={route.routes} />
                )}
                />
              })
            }            
        </div>
      </HashRouter>
      </Provider>
    );
  }
}

export default App;