完成了收藏store有关的redux,新建了三个常量，新建了一个action，新建了一个reducers

src/actions/store.js

@@ -0,0 +1,22 @@
+import * as actionTypes from '~constants/store';
+
+export function update(data) {
+ return {
+ type: actionTypes.STORE_UPDATE,
+ data
+ };
+};
+
+export function add(item) {
+ return {
+ type: actionTypes.STORE_ADD,
+ data: item
+ };
+};
+
+export function rm(item) {
+ return {
+ type: actionTypes.STORE_RM,
+ data: item
+ };
+};

src/actions/userinfo.js

@@ -5,4 +5,4 @@ export function update(data) {
  type: actionTypes.USERINFO_UPDATE,
  data
  }
-}
+};

src/constants/store.js

@@ -0,0 +1,3 @@
+export const STORE_UPDATE = 'STORE_UPDATE'; // 更新
+export const STORE_ADD = 'STORE_ADD'; // 添加
+export const STORE_RM = 'STORE_RM'; // 删除

src/constants/userinfo.js

@@ -1 +1 @@
-export const USERINFO_UPDATE = 'userinfo_update';
+export const USERINFO_UPDATE = 'USERINFO_UPDATE';

src/containers/City/index.js

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import * as userInfoActionsFormOtherFile from '~actions/userinfo';
+import * as userInfoActionsFromOtherFile from '~actions/userinfo';
 
 import LocalStore from '~util/localStore';
 import { CITYNAME } from '~config/localStoreKey';
@@ -29,9 +29,10 @@ class City extends PureComponent {
 
  // 1.修改redux
  const userinfo = this.props.userinfo;
-
+ const actions = this.props.userInfoActions;
+
  userinfo.cityName = newCity;
- this.props.userInfoActions.update(userinfo);
+ actions.update(userinfo);
 
  // 2.修改localStorage
  LocalStore.setItem(CITYNAME, newCity);
@@ -51,7 +52,7 @@ const mapStateToProps = state => {
 
 const mapDispatchToProps = dispatch => {
  return {
- userInfoActions: bindActionCreators(userInfoActionsFormOtherFile, dispatch)
+ userInfoActions: bindActionCreators(userInfoActionsFromOtherFile, dispatch)
  };
 };
 

src/containers/Detail/index.js

@@ -1,5 +1,8 @@
 import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import * as storeActionsFromFile from '~actions/store'; // 引入store收藏的action(3个)
 
 import Header from '~components/Header';
 import Info from './subpage/Info'; // 商户详情
@@ -10,14 +13,18 @@ class Detail extends PureComponent {
  render() {
  // 获取商户id
  const id = this.props.match.params.id;
-
+ console.log(this.props)
  return (
  <div>
  <Header title="商户详情" />
  <Info id={id} />
  <Buy 
+ id={id}
  toUser={this.toUser}
  loginCheck={this.loginCheck}
+ userinfo={this.props.userinfo}
+ store={this.props.store}
+ storeActions={this.props.storeActions}
  />
  <Comment id={id} />
  </div>
@@ -32,7 +39,7 @@ class Detail extends PureComponent {
  // 检查登录状态,不管是收藏还是购买，都需要登录后才能进行
  loginCheck = () => {
  const id = this.props.match.params.id;
- const userinfo = this.props;
+ const userinfo = this.props.userinfo;
 
  if (!userinfo.username) {
  // 不存在则跳转到登录界面，要传入目标router,以便登录完了之后可以自己跳转回来
@@ -42,19 +49,19 @@ class Detail extends PureComponent {
  }
  return true;
  };
-}
-
+};
 
 // ==========================redux react 绑定==========================
 const mapStateToProps = state => {
  return {
- userinfo: state.userinfo
+ userinfo: state.userinfo,
+ store: state.store
  };
 };
 
 const mapDispatchToProps = dispatch => {
  return {
-
+ storeActions: bindActionCreators(storeActionsFromFile, dispatch)
  };
 };
 

src/containers/Detail/subpage/Buy.js

@@ -8,7 +8,7 @@ class Buy extends PureComponent {
  constructor(props) {
  super(props);
  this.state= {
- isStore: true // 是否收藏 true已收藏
+ isStore: false // 是否收藏 true已收藏
  }
  };
 
@@ -24,6 +24,26 @@ class Buy extends PureComponent {
  )
  };
 
+ // 进入界面后就应该判断是否收藏了
+ componentDidMount() {
+ this.checkStoreState();
+ };
+
+ // 检验当前商户是否已经被收藏
+ checkStoreState = () => {
+ const { id, store } = this.props;
+
+ // some主要有一个满足即可
+ const isStore = store.some(item => {
+ // 如果store中有这个id，说明已经被收藏了
+ return item.id === id;
+ });
+
+ this.setState({
+ isStore
+ });
+ };
+
  // 收藏
  storeHandle = () => {
 
@@ -37,7 +57,7 @@ class Buy extends PureComponent {
  };
  // 此过程为模拟购买，因此可省去复杂的购买过程
 
- // 跳转到用户界面
+ // 跳转到用户主页
  this.props.toUser();
  };
 };

src/containers/Login/index.js

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import * as userInfoActionsFormOtherFile from '~actions/userinfo';
+import * as userInfoActionsFromOtherFile from '~actions/userinfo';
 
 import Header from '~components/Header';
 import LoginComponent from '~components/LoginComponent'
@@ -56,12 +56,12 @@ class Login extends PureComponent {
  // 登录成功之后的业务处理
  loginHandle = username => {
  // 保存用户名
- const acitons = this.props.userInfoActions;
+ const actions = this.props.userInfoActions;
  // 获取redux中的userinfo
  let userinfo = this.props.userinfo;
 
  userinfo.username = username;
- acitons.update(userinfo);
+ actions.update(userinfo);
 
  // 跳转链接
  const params = this.props.match.params;
@@ -88,7 +88,7 @@ const mapStateToProps = state => {
 
 const mapDispatchToProps = dispatch => {
  return {
- userInfoActions: bindActionCreators(userInfoActionsFormOtherFile, dispatch)
+ userInfoActions: bindActionCreators(userInfoActionsFromOtherFile, dispatch)
  };
 };
 

src/reducers/index.js

@@ -1,6 +1,8 @@
 import { combineReducers } from 'redux';
 import userinfo from './userinfo';
+import store from './store';
 
 export default combineReducers({
- userinfo
+ userinfo,
+ store
 })

src/reducers/store.js

@@ -0,0 +1,21 @@
+import * as actionTypes from '../constants/store';
+
+const initialState = [];
+
+export default function store(state = initialState, action) {
+ switch (action.type) {
+ case actionTypes.STORE_UPDATE:
+ return action.data;
+ case actionTypes.STORE_ADD:
+ state.unshift(action.data); // 放在最前面
+ return state;
+ case actionTypes.STORE_RM:
+ const newState = state.filter(item => {
+ return item.id !== action.data.id;
+ });
+ console.log(newState)
+ return newState;
+ default:
+ return state;
+ }
+};