最简明清晰使用react redux 【java角度】

说明

• redux是用作中间件缓存性质，react用户使用redux时不必层层通过props传数据
• 任一处修改了redux中某一数据，其他调用处会实时刷新对应数据
• 使用场景

可以用作数据回显，例如：点开详情页，然后回退，填充原始筛选条件

环境准备

• 按如下示例需特别注意命名，存与取得type名字要一致比如SET_ISSUE_FILTERS
• 封装的方式取数据要检验效果，有失败现象，如{getIssueFilters}

package.json引入依赖
  "devDependencies": {
    "redux-logger": "3.0.6",

  "dependencies": {
    "redux": "~4.0.1",
    "redux-thunk": "~2.3.0",

//存数据
//D:\d_work_code\code_xiaomi\com_mitest_hina\src\actions\issueManager.js
export const  setIssueFilters = data => dispatch => {
  dispatch({
    type: 'SET_ISSUE_FILTERS',
    payload: data
  })
}
export const getIssueFilters=(keyName)=>{
  if(keyName){
    return store.getState().issueFilters&&store.getState().issueFilters[keyName]
  }
  return store.getState().issueFilters
}

//取数据
//D:\d_work_code\code_xiaomi\com_mitest_hina\src\reducers\index.js
import issueFilters from './issueFilters'
export default combineReducers({
  issueFilters,
  riskReport
})
//D:\d_work_code\code_xiaomi\com_mitest_hina\src\reducers\issueFilters.js
const initialState = {
 /* form: {
    pageNum: 1,
    pageSize: 10,
  }*/
}
export default (state = initialState, action = {}) => {
  const { type, payload } = action
  switch (type) {
    case 'SET_ISSUE_FILTERS':
      // return Object.assign(state, { form: { ...state.form, ...data } })
      return payload ? payload : {state}
    default:
      return state
  }
}

相关方案

• 取数据有两种方式，1：通过store，2：通过props
• 建议不要用2方式，需要声明到

存数据
import {store} from '../../../store'
    store.dispatch(setIssueFilters({...data,'tabActive':tabActive}))

//取数据方式1
import {store} from '../../../store'
store.getState().issueFilters

//取数据方式2，需connect声明
import { connect } from 'react-redux'

	console.log('handleQueryAction',{getIssueFilters},store.getState().issueFilters, this.props.issueFilters)
// export default IssueBrowse
export default connect((state) => {
  return {
    issueFilters: state.issueFilters
  }
})(IssueBrowse)

关系图

相关资料

https://blog.csdn.net/weixin_40030173/article/details/119355462
https://blog.csdn.net/u011077672/article/details/82684019