---------------根模块App.js中
import {Provider} from 'react-redux';
import store from './store';
import Header from './header/Header.js';
{the App the extends the Component class
the render () {
return (
all modules <Provider store = {store}> // Provider inside the store data to the Provider comprising using
<Header />
</ Provider>
)
}
}
--------------- submodule Header.js
Import {Connect} from 'REACT-Redux';
const Header=(props)=>{
return (
<div
onClick={props.handlerClick}
>计数：{props.number}</div>
)
}
stateToProps = const (state) => {
return ({
Number: // state.header.number pass over from the state where the data assigned to take props, because the middle layer of the stack header, so the need to take the time data from the header inside the number takes a value
})
}
const propsToDispatch=(dispatch)=>{
return {
handlerClick(){
const action={
type:'change_num'
}
dispatch(action); //通过dispatch传action给reducer
}
}
}
export default connect (stateToProps, propsToDispatch) (Header); // connect Header data and sub-module connected
--------------- root Data Store
---------- --- root data Store: The index.js
Import createstore {} from 'Redux';
Import from the reducer './reducer.js';
export default createStore(reducer);
-------------根数据store：reducer.js
import {combineReducers} from 'redux';
import headerReducer from '../header/reducer.js';
export default combineReducers ({// combineReducers combined all submodules the reducer
header: headerReducer
})
--------------- sub-data header inside the reducer
const = {defaultState
Number:. 1
}
default Export (state = defaultState, Action) => {
IF (action.type === 'change_num') {// The dispatch pass over, action, state data of the operation
const newState = JSON.parse (JSON.stringify ( State));
newState.number ++;
return newState The;
}
return State;
}