React学习笔记(二)Dva redux

261 阅读1分钟

基于dva的redux 最简单的demo

index.js文件

import { connect } from 'dva';
const DemoPage = (props) => {
    const {area, dispatch } = props;
    // function add(){
    //   dispatch({
    //     type: 'area/add',
    //     payload: {
    //       add: 5,
    //     },
    //   });
    // };
    return (
      <div>
          <p>{area.count}</p>
          {/* <button onClick={add}>增加</button> */}
          <button onClick={()=> { dispatch({ type: 'area/add', payload:{add: 2}})}}>增加</button>
      </div>
    )
} 
export default connect(({ area }) => ({
  area,
}))(DemoPage);

统计目录下,新建model.js

const Model = {
  namespace: 'area',
  state: {
    count : 1
  },
  reducers: {
    add(state, { payload }) {
      return { ...state, count: state.count + payload.add };
    },
  },
};
export default Model;

image.png