react项目中使用redux基础流程

[mianmalife]

入口文件

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));

`

    </Provider>`

[mianmalife]

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 }; };

[mianmalife]

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))); }; };

[mianmalife]

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 } }

[mianmalife]

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; } }

[mianmalife]

import { combineReducers } from "redux"; import products from "./productReducer"; import adds from "./addReducer";

export default combineReducers({ products, adds });

[mianmalife]

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 (

Counter计数器

- {this.props.count} +

re

);

} }

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);

[mianmalife]

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 (

姓名列表

{products.map(p => (
• {p.shop_name}
))}

);

} }

const mapStateToProps = state => ({ products: state.products.item });

export default connect(mapStateToProps)(ProductList);

[mianmalife]

rootReducer.js

import { combineReducers } from "redux"; import products from "./productReducer"; import adds from "./addReducer";

export default combineReducers({ products, adds });