diff --git a/src/actions/store.js b/src/actions/store.js new file mode 100644 index 0000000..0d244ea --- /dev/null +++ b/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 + }; +}; \ No newline at end of file diff --git a/src/actions/userinfo.js b/src/actions/userinfo.js index bc8d3bf..9d83147 100644 --- a/src/actions/userinfo.js +++ b/src/actions/userinfo.js @@ -5,4 +5,4 @@ export function update(data) { type: actionTypes.USERINFO_UPDATE, data } -} \ No newline at end of file +}; diff --git a/src/constants/store.js b/src/constants/store.js new file mode 100644 index 0000000..e8e7c06 --- /dev/null +++ b/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'; // 删除 diff --git a/src/constants/userinfo.js b/src/constants/userinfo.js index a734993..4af6e0a 100644 --- a/src/constants/userinfo.js +++ b/src/constants/userinfo.js @@ -1 +1 @@ -export const USERINFO_UPDATE = 'userinfo_update'; \ No newline at end of file +export const USERINFO_UPDATE = 'USERINFO_UPDATE'; \ No newline at end of file diff --git a/src/containers/City/index.js b/src/containers/City/index.js index 5e50525..1230af2 100644 --- a/src/containers/City/index.js +++ b/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) }; }; diff --git a/src/containers/Detail/index.js b/src/containers/Detail/index.js index 5ddc410..30d2b61 100644 --- a/src/containers/Detail/index.js +++ b/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 (
@@ -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) }; }; diff --git a/src/containers/Detail/subpage/Buy.js b/src/containers/Detail/subpage/Buy.js index a66f830..c0bcd78 100644 --- a/src/containers/Detail/subpage/Buy.js +++ b/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(); }; }; diff --git a/src/containers/Login/index.js b/src/containers/Login/index.js index e7d9c14..4ee0780 100644 --- a/src/containers/Login/index.js +++ b/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) }; }; diff --git a/src/reducers/index.js b/src/reducers/index.js index 566753f..7cfb95e 100644 --- a/src/reducers/index.js +++ b/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 }) diff --git a/src/reducers/store.js b/src/reducers/store.js index e69de29..28079e8 100644 --- a/src/reducers/store.js +++ b/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; + } +}; \ No newline at end of file