TIM截圖20191026225321.jpg

Redux = Reducer + Flux

TIM截圖20191026225940.jpg

Redux示例

./store/index.js

import { createStore , combineReducers, applyMiddleware , compose } from 'redux'
// reducers
import { admin } from './redux/admin.reducer.js'
import { users } from './redux/users.reducer.js'
// create store
var store = createStore(
  combinReducers( {admin , users} ) ,
  compose(
    applyMiddleware( thunk ) ,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )
)
export default store

./redux/todolist.redux.js

// constant
const INIT = 'init'
// defaultState
const defaultState = {
  list : [ 1, 'abc' , 23000 ]
}
// reducer
export function todolist( state = defaultState , action ){
  switch( action.type ){
    case INIT :
      return {
          ...state ,
          ...action.payload
      }
    default : 
      return state ;
  }
}
// action
export function ac_init( data ){
  return {
    type : INIT ,
    payload : data 
  }
}

.App.js

import { Provider } from 'react-redux'
import Component from './component/Component'
import store from './store'

const App = ()=>(
  <Provider store={store}>
      <Component />
  </Provider>
)

./component/Component.js ( without react-redux )

import React from 'react'
import store from '../../store/index.js'

class Component extends React.Component {
  constructor( props ){
    super( props )  
    // initizlize the state from store 
    this.state = store.getState()
  }
  render(){
    return (
        <div>{ this.state.list }</div>
    )
  }
}
export default Component

TIM截圖20191027170117.jpg

redux-saga

helloSaga.js

export function * helloSaga() {
  console.log('Hello Sagas!');
}

main.js

import { createStore , applyMiddleware } from 'redux'
import createSagaMiddleware from 'redux-saga'
import { helloSaga } from './helloSaga'
const sagaMiddleware = createSagaMiddleware()

var store = createStore(
  reducers ,
  applyMiddleware( sagaMiddleware )
)

sagaMiddleware.run( helloSaga )

react-redux

app.js
用 Provider 組件將 store 掛載在最頂層的元素

import React from 'react'
import ReactDOM from 'react-dom'
import Todolist from './Todolist'
import store from './store'

import { Provider } from 'react-redux'

class App extends React.Component{
  render(){
    return(
      <Provider store={store}>
         <Todolist />
      </Provider>
    )
  }
}

export default App

. / store / index.js
將所有reducer合并成一個(gè)combineReducers
生成 store , 并傳入combineReducers , middleware

import { createStore , combineReducers, applyMiddleware , compose } from 'redux'
// reducers
import { todolist } from './redux/todolist.redux.js'
// create store
var store = createStore(
  combinReducers( { todolist } ) ,
  compose(
    applyMiddleware( thunk ) ,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )
)
export default store

. / redux / todolist.redux.js
包含 常量 令杈，reducer ，actions

// constant
const INIT = 'init'
// defaultState
const defaultState = {
  list : [ 1, 'abc' , 23000 ]
}
// reducer
export function todolist( state = defaultState , action ){
  switch( action.type ){
    case INIT :
      return {
          ...state ,
          ...action.payload
      }
    default : 
      return state ;
  }
}
// action
export function ac_init( data ){
  return {
    type : INIT ,
    payload : data 
  }
}

. / container / Todolist / Todolist.js

import React from 'react'
import { connect } from 'react-redux'
import { ac_init } from '../../../redux/todolist.redux.js'

class Todolist extends React.Component{
  render(){
    return(
      <div>
        { this.props.list.map( item => (
          <span>{item}</span>
        ))}
      </div>
    )
  }
}

const mapStateToProps = state => state.todolist
const mapActionToProps = { ac_init }

export default connect( mapStateToProps , mapActionToProps )( Todolist )