我正在学习react/redux并且有两个主要状态的应用程序:
我有三个功能/动作createFilter,updateFilter以及deleteFilter该修改#2的状态.我有一个动作filterItems,根据#2的状态修改#1.因此,只要#2发生变化,就需要调度此操作.
这是我正在使用的组件:
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { createFilter } from '../actions/actions'
import { updateFilter } from '../actions/actions'
import { deleteFilter } from '../actions/actions'
import { filterItems } from '../actions/actions'
class ItemList extends Component {
createFilter(input) {
this.props.createFilter(input)
this.props.filterItems()
}
updateFilter(input) {
this.props.updateFilter(input)
this.props.filterItems()
}
deleteFilter() {
this.props.deleteFilter()
this.props.filterItems()
}
...
// Render method …我正在使用这个入门套件,下面的代码可以在这个fork上找到.
柜台组件:
export const Counter = (props) => (
<div style={{ margin: '0 auto' }} >
<h2>Counter: {props.counter}</h2>
<button className='btn btn-default' onClick={props.double}>
Double (Async)
</button>
</div>
)
Counter.propTypes = {
counter : React.PropTypes.number.isRequired,
double : React.PropTypes.func.isRequired,
increment : React.PropTypes.func.isRequired
}
export default Counter
而容器组件:
import { connect } from 'react-redux'
import { increment, double } from '../modules/counter'
import Counter from '../components/Counter'
const mapDispatchToProps = {
increment : () => increment(1),
double: () => double()
}
const …我在单独的文件夹中有两个reducer,用于与此类似的结构中的单独组件:
index.js
/componentOne
|_ componentOne.js
|_ componentOneActionCreator.js
|_ componentOneReducer.js
/componentTwo
|_ componentTwo.js
|_ componentTwoActionCreator.js
|_ componentTwoReducer.js
这些Reducers中的每一个都在应用程序中单独工作 - 当我createStore进入index.js(他们import进入)时 - 但如果我尝试使用它们combineReducers(),它们的功能都不起作用(但不会打破UI).我认为这与州有关 - 更多代码供以下参考:
index.js
const rootReducer = combineReducers({
componentOneReducer,
componentTwoReducer
});
let store = createStore(rootReducer, applyMiddleware(thunk))
componentOneReducer
export default(state = {}, payload) => {
let newState = JSON.parse(JSON.stringify(state));
switch (payload.type) {
case 'REQUEST_DATA':
newState.isLoading = true;
return newState;
case 'RECEIVE_DATA':
newState.isLoading = false;
newState.pageData = payload.payload;
newState.pageName = payload.payload.pageName;
return newState
default: …我正在关注此链接的教程:http://www.thegreatcodeadventure.com/react-redux-tutorial-part-ii-react-router-and-container-components/
但是当handleSubmit()函数被触发时我得到一个错误:
错误:操作必须是普通对象.使用自定义中间件进行异步操作.
但我使用redux-thunk作为中间件.有什么遗失的吗？我正在使用Antd作为UI框架.
零件
import React, { Component } from 'react';
import compose from 'recompose/compose';
import { Form, Icon, Input, Button, Checkbox } from 'antd';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import * as sessionActions from './actions/sessionActions';
const FormItem = Form.Item;
class Login extends Component {
constructor(props){
super(props);
this.state = {credentials: {username: '', password: ''}};
this.handleSubmit = this.handleSubmit.bind(this);
this.onChange = this.onChange.bind(this);
}
onChange(event) {
const field = event.target.name;
const credentials = this.state.credentials; …这是我的代码
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import "normalize.css/normalize.css"
import "./styles/styles.scss";
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import reduxThunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';
import AppRouter from './routers/AppRouter';
import reducers from './reducers';
import {AUTH_USER} from "./actions/types";
//
const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore);
const store = createStoreWithMiddleware(reducers);
const token = localStorage.getItem('token');
if(token){
store.dispatch({type:AUTH_USER});
}
ReactDOM.render(
<Provider store={store}>
<AppRouter />
</Provider>
, …我使用 redux 的假设是调度操作是一个同步任务。
fire action 1 - > store updated
fire action 2 -> store updated
在我目前正在进行的一个项目中，我有一个产品定制器，允许一些用户选择，他们可以下多个订单，但如果他们只订购当前选择并选择“购买”，我会触发“addOrder”，将他们的选择添加到 orders 数组，然后是“purchase”操作，这是一个将存储在 redux 中的订单提交到我的购物车 API 的 thunk。
我预计我将能够在每次操作后可靠地依赖商店处于一致状态，因此当第二个操作触发时，它将具有状态，就像它之前的第一个常规操作触发后一样，但没有骰子。
在我的连接组件中，我调度每个动作：
//.... inside component
purchase = () => {
this.props.addOrder(); // regular action
this.props.purchase(); // thunk
};
// ... rest of component
注意我打电话setStepPositionIndex()用dispatch().当我删除dispatch(...)成为正义setStepPositionIndex()
我会期望内部的调度调用setStepPositionIndex()将接收它传递的普通操作对象并发送它...
或者,如果我在显式返回其中的内部删除dispatch()调用setStepPositionIndex()(并保持dispatch(setStepPositionIndex())actionObj,我希望成功调度dispatch(setStepPositionIndex(actionObj))
但是这个动作创作者的成功执行需要两个......为什么？
/* actions.js */
import { store } from "../store.js";
store.dispatch(setStepPositionIndex());
export const SET_STEP_POSITION_INDEX = "SET_STEP_POSITION_INDEX";
export const setStepPositionIndex = () => {
return (dispatch, getState) => {
const newSteps = getState().goals.currentGoalSteps.map((stepObj, index) => {
return { ...stepObj, positionIndex: index };
});
console.log("newSteps", newSteps);
/* [{step: "Step3", positionIndex: 0}
{step: "Step2", positionIndex: 1}
{step: "Step1", positionIndex: 2}] */ …我正在制作一个 React-redux 组件以嵌入到 Laravel 刀片文件中。在反应端，
我正在使用带有 thunk 的 redux，当我尝试从 Laravel 路由获取没有 thunk 的数据时，它得到了正确的。
但是当我在动作创建者中使用 axios 请求异步获取数据时。它给出了：
'未捕获的错误：操作必须是普通对象。使用自定义中间件进行异步操作。
这是反应端的入口组件。
入口.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reducer from '../store/reducers/reducer';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import thunk from "redux-thunk";
const store = createStore(reducer, applyMiddleware(thunk)
+window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
// console.log(getState());
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>
, document.getElementById('like_post'));
这是App.js 的主要组件
import React, { Component } …编译此代码时，出现此错误SyntaxError：意外令牌，预期为“，”。我希望你能帮我这个忙。在线错误（13:39）
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import rootReducers from './reducers';
const initialState = {};
const middleware = [thunk];
const store = createStore({
rootReducers,
initialState,
composeWithDevTools(applyMiddleware(...middleware))
});
export default store;
谢谢
reactjs redux redux-thunk react-redux redux-devtools-extension
Error:
index.js:1 A non-serializable value was detected in an action, in the path:
payload.config.transformRequest.0.
Value: ƒ
transformRequest(data, headers) {
Run Code Online (Sandbox Code Playgroud)normalizeHeaderName(headers, 'Accept'); normalizeHeaderName(headers, 'Content-Type'); if (utils.isFormData(data) || utils.isArrayBuffer(data) || utils.i…
Slice:
export const getProducts = createAsyncThunk(
'products/getProducts',
async() => {
const res = await axios.get('http://localhost:5000/products/view-products', {withCredentials: true});
return res;
}
)
const getProductsSlice = createSlice({
name : 'products',
initialState : {
list : [],
status : null
},
extraReducers : {
[getProducts.pending] : (state) => {
state.status = 'loading'
}, …