Open mianmalife opened 4 years ago
action
export const INCREMENT = "INCREMENT"; export const DECREMENT = "DECREMENT"; export const RESET = "RESET";
export const increment = () => { return { type: INCREMENT }; }; export const decrement = () => { return { type: DECREMENT }; }; export const reset = () => { return { type: RESET }; };
export const FETCH_PRODUCTS_BEGIN = "FETCH_PRODUCTS_BEGIN"; export const FETCH_PRODUCTS_SUCCESS = "FETCH_PRODUCTS_SUCCESS"; export const FETCH_PRODUCTS_FAILURE = "FETCH_PRODUCTS_FAILURE";
export const fetchProductsBegin = () => ({ type: FETCH_PRODUCTS_BEGIN });
export const fetchProductsSuccess = products => ({ type: FETCH_PRODUCTS_SUCCESS, payload: { products } });
export const fetchProductsFailure = error => ({ type: FETCH_PRODUCTS_FAILURE, payload: { error } });
export const GetProData = () => { return dispatch => { dispatch(fetchProductsBegin()); return fetch( 'http://yapi.demo.qunar.com/mock/32622/info' ) .then(res => res.json()) .then(json => { dispatch(fetchProductsSuccess(json.data.list)); return json.data.list; }) .catch(error => dispatch(fetchProductsFailure(error))); }; };
reducer
import { INCREMENT, DECREMENT, RESET } from '../action/add' const initialState = { count: 0 }
export default function addReducer(state = initialState, action) { console.log(action, state) switch (action.type) { case INCREMENT: return { count: state.count + 1 } case DECREMENT: return { count: state.count ? state.count - 1 : 0 } case RESET: return { count: 0 } default: return state } }
import { FETCH_PRODUCTS_BEGIN, FETCH_PRODUCTS_SUCCESS, FETCH_PRODUCTS_FAILURE } from "../action/productAction";
const initialState = { item: [] }; export default function productReducer(state = initialState, action) { switch (action.type) { case FETCH_PRODUCTS_BEGIN: return { ...state }; case FETCH_PRODUCTS_SUCCESS: return { ...state, item: action.payload.products }; case FETCH_PRODUCTS_FAILURE: return { ...state, item: [] }; default: return state; } }
import { combineReducers } from "redux"; import products from "./productReducer"; import adds from "./addReducer";
export default combineReducers({ products, adds });
counter.js
import React from "react"; import { connect } from "react-redux"; import { increment, decrement, reset } from "../action/add";
class Counter extends React.Component { increment = () => { this.props.increment(); };
decrement = () => { this.props.decrement(); };
reset = () => { this.props.reset(); }; render() { console.log(this.props.count) return (
);
} }
function mapStateToProps(state) {
console.log(state)
return {
count: state.adds.count
};
}
// 在这个对象中, 属性名会成为 prop 的 names,
// 属性值应该是 action 生成器函数.
// 它们跟 dispatch
绑定起来.
const mapDispatchToProps = {
increment,
decrement,
reset
};
export default connect( mapStateToProps, mapDispatchToProps )(Counter);
productReducer
import React from "react"; import { connect } from "react-redux"; import { GetProData } from "../action/productAction";
class ProductList extends React.Component { componentDidMount() { this.props.dispatch(GetProData()); }
render() { const { products } = this.props; console.log(products) return (
);
} }
const mapStateToProps = state => ({ products: state.products.item });
export default connect(mapStateToProps)(ProductList);
rootReducer.js
import { combineReducers } from "redux"; import products from "./productReducer"; import adds from "./addReducer";
export default combineReducers({ products, adds });
入口文件
import { createStore, applyMiddleware } from "redux";
import { Provider } from "react-redux";
import thunk from "redux-thunk";
import rootReducer from "./reducer/rootReducer";
import ProductList from "./component/productlist";
import Counter from "./component/counter";
const store = createStore(rootReducer, applyMiddleware(thunk));
`