Javascript 如何设置React Redux应用程序在我的Reducer中返回的内容？

我正在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>
        );
    }
}

这是我的

actions.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; 

export const ADD_CART = 'ADD_CART';

export function addCart(){
    return {
        type: ADD_CART,
        payload: item
    }
};

import {ADD_CART} from './actions';

export default reducer;

function rootReducer(state, action){
    switch(action.type)
        case ADD_CART:
            return  
}

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

还有我的

reducers.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; 

export const ADD_CART = 'ADD_CART';

export function addCart(){
    return {
        type: ADD_CART,
        payload: item
    }
};

import {ADD_CART} from './actions';

export default reducer;

function rootReducer(state, action){
    switch(action.type)
        case ADD_CART:
            return  
}

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

为了将我的商店链接到我的组件，我将我的所有组件包装在我的

app.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; 

export const ADD_CART = 'ADD_CART';

export function addCart(){
    return {
        type: ADD_CART,
        payload: item
    }
};

import {ADD_CART} from './actions';

export default reducer;

function rootReducer(state, action){
    switch(action.type)
        case ADD_CART:
            return  
}

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

从“React”导入React；
从“react dom”导入react dom；
从“react Router”导入{Router，Route，IndexRoute，hashHistory}；
从'react redux'导入{Provider}；
从“../store”导入存储；
从“视图/应用程序”导入应用程序；
从“视图/主视图”导入主视图；
从“视图/Webshop”导入Webshop；
从“视图/网络艺术”导入购物车；
ReactDOM.render(
,
document.getElementById（'app'）//eslint禁用行
);

---

如何设置reducer中返回的内容，以便将

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

---

更详细地说明如何自定义

mapDispatchToProps

将由多个组件使用的应用程序数据应添加到

存储中。然后，您可以使用
connect
从任何组件访问此数据

如果您希望其他组件访问
购物车
，则应将其添加到您的商店中

i、 e

然后，您可以使用
connect
在任何组件中使用此值

在根减缩器中，在分派操作时更改此值

import {ADD_CART} from './actions';

export default reducer;

function rootReducer(state, action){
    switch(action.type)
        case ADD_CART:
            return {
             ...state,
             cart: action.payload
             }
}

你的还原程序应该（通常）返回另一个state对象。这就是我在应用于代码时遇到的问题。我应该如何使用state来获取我想要的数据@OliverCharlesworth我收到一个错误
模块构建失败：重复声明“addCart”
，我假设这是因为我的操作函数和处理单击的函数具有相同的名称。另外，我是否需要此方法的reducers文件？那么我返回的值是多少？通过添加别名修复了该错误。.但是我得到了此错误
未捕获错误：预期reducer是一个函数。
因为我的reducer函数不返回任何东西。.我理解在您的示例中
const-mapsdispatchtoprops=（dispatch）=>{
用作我的reducer，因此我删除了我的
reducers.js
文件。现在我得到了以下错误：
app.js:831未捕获错误：在“Connect（addCart）”的上下文或道具中找不到“store”。请将根组件包装在中，或者将“store”作为道具显式传递给“Connect（addCart）”。
“我知道在您的示例中，
const-mapDispatchToProps=（dispatch）=>{
用作我的reducer，因此我删除了reducers.js文件。“这是不正确的；您仍然需要一个reducer。reducer接收操作并将必要的修改返回到您的存储。我修改了代码以调用类
WebShop
，并将其传递给
connect
。