Redux = Reducer + Flux
TIM截图20191026225940.jpgRedux示例
./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合并成一个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 )
网友评论