Provider:根组件
当前整个项目都在Provider下，作用是可以让store可以供内部任何组件使用（基于上下文完成的），Provider下只能存在一个子元素
import store from './store';
import { Provider} from 'react-redux';
ReactDOM.render(<Provider store={store}>
<MyRouter />
</Provider>, document.getElementById('root'));
子组件和redux创建连接需要用到react-redux的connect方法
当你需要在此组件上挂载action方法和reducer中的数据那么久用connect方法
connect(state => ({ ...state.user }), action.user)(Form.create()(AddUser))第一个参数是你需要挂载的reducer，第二个参数是你要挂载的action方法，action被封装成了一个对象，在挂载时需要返回的是对象中的方法，直接挂载对象是无法生效的。比如action中封装的是方法那你可以直接使用action，假如action对象中封装的是对象那么你需要用action.对象取出对象中的方法才能挂载生效，在使用时我们可以在this.props中看到我们挂载的数据和方法
import { connect } from 'react-redux';
import action from '../../store/action'
//=>把redux容器中的状态信息遍历，赋值给当前组件的属性
let mapStateToProps = state => {
// 需要用到什么就返回什么，把它挂载到当前组件的属性上
return{
...state.user
}
};
//=>把redux中的dispatch派发行为遍历，也赋值给组件的属性
let mapDispatchToProps = dispatch => {
return {
init(initData){
dispatch(action.user.init(initData))
}
}
}
export default connect([mapStateToProps], [mapDispatchToProps])(Form.create()(AddUser));
export default connect(state => ({ ...state.user }), action.user)(Form.create()(AddUser));//简写上面的步骤
当需要redux处理异步请求需要使用中间件redux-thunk再创建store的时候
import { createStore, applyMiddleware, compose } from 'redux';
import reducer from './reducer';
import thunk from 'redux-thunk';
let store = createStore(
reducer,
applyMiddleware(thunk)
);
export default store;
当需要在浏览器上使用redux插件调试
import { createStore, applyMiddleware, compose } from 'redux';
import reducer from './reducer';
import thunk from 'redux-thunk';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
let store = createStore(
reducer,
composeEnhancers(applyMiddleware(thunk))
);
export default store;
一个完成的react-redux流程
store => action-types.js
export const ADD_USER_ALL = 'ADD_USER_ALL' //创建一个派发行为
======================================================
action => user.js
import * as TYPES from '../action-types';//引入行为列表
import {userSeekAll} from '../../api/request';//引入ajax请求列表
const user = {//user为一个普通对象，存放的方法都是基于以后对user相关的操作
userSeekAll(){//创建一个获取用户的方法
return async dispatch => {//因为用到了ajax异步操作需要使用async ,await
let userList = await userSeekAll();//等待执行完成引入的ajax请求函数返回结果后再执行下面步骤，把请求到的数据给变量userList
dispatch({//最后把dispatch返回给userSeekAll，当执行userSeekAll()时就开始了派发任务
type: TYPES.ADD_USER_ALL,
userList
})
}
}
}
action => index.js //合并所有action
import user from './user.js';
const action = {
uesr
}
export default action;
======================================================
reducer => user.js //管理user状态的容器
import * as TYPES from '../action-types.js';
export default function user(state = {} ,action){//user容器的初始state给了默认值为空对象，action是派发的时候给的参数
state = JSON.parse(JSON.stringify(state));//不能直接更改原有state，需要深拷贝一份来更改或者用解构赋值拷贝 state = {...state}
switch (action.type) {//判断是哪个派发行为
case TYPES.ADD_USER_ALL:
state.userList = action.userList//把派发行为的值赋值给state
break;
default:
break;
}
return state;//最后把state返回
}
======================================================
reducer => index.js//把每个模块的单独设定的reducer函数最后合并成为总的reducer
import user from './user'；
import { combineReducers } from 'redux';//combineReducers为redux提供的合并reducer的方法
let reducer = combineReducers({
user
})
export default reducer;
======================================================
store => index.js//最后创建store容器
import { createStore, applyMiddleware, compose } from 'redux';
import reducer from './reducer';
import thunk from 'redux-thunk';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
let store = createStore(
reducer,
composeEnhancers(applyMiddleware(thunk))
);
export default store;
======================================================
最后在根目录的index.js中引入
import store from './store';
import { Provider} from 'react-redux';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>, document.getElementById('root'));
在子组件中
import { connect } from 'react-redux';
import action from '../../store/action'
export default connect(state => ({ ...state.user }), action.user)(Form.create()(AddUser));
//state => ({ ...state.user })将user中的状态挂载到当前组件
//action中的user方法挂载到当前组件
注（数据已更新，视图未更新的原因一般都是在reducer中没有克隆state，直接改变了原有state导致视图不正常更新）
