[英]Why is this action.type not firing in the Reducer of my React/Redux App?
[英]How to set what gets return in my Reducer for React Redux app?
我正在React環境中設置Redux,以便能夠在組件之間移動用戶選擇數據。 我希望能夠在我的Webshop.js
文件中找到cart
值:
import React, { Component } from 'react';
import{ Connect } from 'react-redux';
import Shirt from './shirt.jpg';
export default class addCart extends Component {
constructor(){
super();
this.state = {value: 'medium'}
this.handleClick = this.handleClick.bind(this);
this.change = this.change.bind(this);
}
handleClick() {
let cart = {price:0,item:"userselection",size:this.state.value};
console.log(cart);
}
change(e){
this.setState({value: e.target.value})
}
itemSelection(){
let userOrder = {price:0,item:"",size:""};
let userItem = "";
if (userItem == "shirt1") {
let itemPrice = 20.00;
}
}
render() {
return (
<div className='Webshop' id='Webshop'>
<li id="Productlist">
<div className='Product'>
<img src={Shirt}></img>
<button onClick={this.handleClick} className="addit">Add to cart</button>
<select id="size" onChange={this.change} value={this.state.value}>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="x-large">X-large</option>
</select>
</div>
<div className='Product'>
<img src={Shirt}></img>
<button onClick={this.handleClick} className="addit">Add to cart</button>
<select id="size" onChange={this.change} value={this.state.value}>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="x-large">X-large</option>
</select>
</div>
</li>
</div>
);
}
}
然后,我想獲取此Cart
值,並使用Redux將其移動到其他組件。 這就是我的Redux store.js
:
import { createStore, applyMiddleware } from 'redux';
import reducer from './reducers';
import thunkMiddleware from 'redux-thunk';
import {createLogger} from 'redux-logger';
var initialState = {
data: [],
url: "/api/comments",
pollInterval: 2000
}
const store = createStore(
reducer,
applyMiddleware(
createLogger(),
thunkMiddleware
)
);
export default store;
這是我的actions.js
:
export const ADD_CART = 'ADD_CART';
export function addCart(){
return {
type: ADD_CART,
payload: item
}
};
和我的reducers.js
:
import {ADD_CART} from './actions';
export default reducer;
function rootReducer(state, action){
switch(action.type)
case ADD_CART:
return
}
為了將商店鏈接到組件,我將所有組件包裝在app.js
的<Provider>
標記內:
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute, hashHistory } from 'react-router';
import {Provider} from 'react-redux';
import store from '../store';
import App from 'views/App';
import Home from 'views/Home';
import Webshop from 'views/webshop';
import Cart from 'views/webcart';
ReactDOM.render(
<Router history={ hashHistory }>
<Provider store={store}>
<Route path='/' component={ App }>
<IndexRoute component={ Home } />
<Route path='Webshop' component={ Webshop } />
<Route path='Cart' component={ Cart } />
</Route>
</Provider>
</Router>,
document.getElementById('app') // eslint-disable-line
);
如何設置減速器中返回的內容,以便將cart
傳遞到應用程序中的其他組件?
使用“ react-redux”中的connect
addCart
組件,並為其提供一個onCartAdd
道具,以將addCart
操作分派到您的商店。
import React, { Component } from 'react';
import { addCart } from './actions';
import { connect } from 'react-redux';
import Shirt from './shirt.jpg';
class WebShop extends Component {
...
handleClick() {
let cart = {price:0,item:"userselection",size:this.state.value};
this.props.onCartAdd(cart);
}
...
}
const mapDispatchToProps = (dispatch) => {
return {
onCartAdd: (cart) => {
dispatch(addCart(cart));
},
}
}
export deafult connect(null, mapDispatchToProps)(WebShop);
您的“ actions.js”中的addCart
需要將item
作為參數:
export const ADD_CART = 'ADD_CART';
export function addCart(iten){
return {
type: ADD_CART,
payload: item
}
};
應將要由多個組件使用的應用程序數據添加到store
。 然后,您可以使用connect
從任何組件訪問此數據。
如果您希望其他組件可以訪問cart
,則應將其添加到商店中,
即
var initialState = {
cart: "medium",
data: [],
url: "/api/comments",
pollInterval: 2000
}
那么您可以通過使用connect
在任何組件中使用此值。
並且在您的root reducer中,在分派操作時更改此值,
import {ADD_CART} from './actions';
export default reducer;
function rootReducer(state, action){
switch(action.type)
case ADD_CART:
return {
...state,
cart: action.payload
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.