1,安装yarn add redux后再安装 yarn add react-redux
2,connect (mapStateToProps,mapDispatchToProps)(组件名)
mapStateToProps指的是connect组件和store做链接时,如何将store的数据映射到Props上面,
mapDispatchToProps中的dispatch是所有的方法合集
3,当reducer传入的数据太多时候得将数据分流到子页面中,这时候会用到 combineReducers
4,actionCreators里边传入的是函数: 是type的判断类型
export const searchFocus = () => ({
type:'search_focus'
});
export const searchBlur = () => ({
type:'search_blur'
});
5,constants 常量的 写入 例如:
export const SEARCH_FOCUS = 'header/search_focus'; export const SEARCH_BLUR ='header/search_blur'
6,immutable 防止state数据的篡改
安装 yarn add immutable
import {fromJS} from 'immutable' //
const defaultState = fromJS({
focused:false
});
export default (state = defaultState,action) =>{
if(action.type===constants.SEARCH_FOCUS) {
return state.set('focused',true)
}
if(action.type===constants.SEARCH_BLUR) {
return state.set('focused',false)
}
return state;
}
7,redux-immutable 统一数据格式
原因:使用immutablestate后此时的state是js对象,而state.header是immutable对象为统一则使用 redux-immutable
安装:yarn add redux-immutable
const mapStateToProps =(state)=> {//此处的state指的是store的state,会将state传递给Props
return{
focused: state.header.get('focused') //此处用get是因为此时的state.headerimmutable对象,得遵循immutable的写法
}
}
此时的代码可改为 :focused: state.get('header').get('focused')
或者:focused: state.getin(['header','focused'])
且此时reducer中改为import {combineReducers} from 'redux-immutable';
这样conbineReducers中的 header数据为 immutable对象格式
8,registerServiceWorker 具体参考(https://www.cnblogs.com/wphl-27/p/10393666.html)
在生产环境中可用可不用
9,ApplyMiddleware
此方法由redux提供
10,redux-thunk