Fatal编程技术网
  • javascript/
  • Javascript 反应还原剂并合并还原剂

Javascript 反应还原剂并合并还原剂

javascript reactjs redux

Javascript 反应还原剂并合并还原剂,javascript,reactjs,redux,Javascript,Reactjs,Redux,您好，我正在使用thunks从后端获取数据 但我不确定如何在我的联合收割机减速器中实现这一点 我的类型： export const FETCH_SUCESS = 'FETCH_SUCESS'; export const FETCH_FAIL = 'FETCH_FAIL'; export const FETCH_LOADING = 'FETCH_FAIL'; export const FILTER_PRODUCT = 'FILTER_PRODUCT'; import api from '

您好，我正在使用thunks从后端获取数据 但我不确定如何在我的联合收割机减速器中实现这一点

我的类型：

export const FETCH_SUCESS = 'FETCH_SUCESS';
export const FETCH_FAIL = 'FETCH_FAIL';
export const FETCH_LOADING = 'FETCH_FAIL';
export const FILTER_PRODUCT = 'FILTER_PRODUCT';

    import api from '../../services/api';
    import {FETCH_SUCESS,FETCH_FAIL,FETCH_LOADING} from '../constants/fetchTypes';

    const fetchSucess = data => ({
        type: FETCH_SUCESS,
        payload: {
          ...data
        }
      });

      const fetchStarted = () => ({
        type: FETCH_LOADING
      });

      const fetchFailed = error => ({
        type: FETCH_FAIL,
        payload: {
          error
        }
      });

    export const fetchProduct = () => {
      console.log('action')
    return dispatch => {
      dispatch(fetchStarted());

      api
        .get('/products')
        .then(res => {
          dispatch(fetchSucess(res.data));
        })
        .catch(err => {
          dispatch(fetchFailed(err.message));
        });
    };
  };

import {
    FETCH_SUCESS,
    FETCH_FAIL,
    FETCH_LOADING,
  } from '../constants/fetchTypes';

  const initialState = {
    loading: false,
    data: [],
    error: null
  };

  export default function productReducer(state = initialState, action) {
    switch (action.type) {
      case FETCH_LOADING:
        return {
          ...state,
          loading: true
        };
      case FETCH_SUCESS:
        return {
          ...state,
          loading: false,
          error: null,
          data: [...state.data, action.payload]
        };
      case FETCH_FAIL:
        return {
          ...state,
          loading: false,
          error: action.payload.error
        };
      default:
        return state;
    }
  }

import { combineReducers } from 'redux'
import  productReducer from './productsFetch.reducer';

export default combineReducers({

});

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

export default function configureStore(initialState) {
    return createStore(
        rootReducer,
        initialState,
        applyMiddleware(thunk)
    );
}
我的行动：

export const FETCH_SUCESS = 'FETCH_SUCESS';
export const FETCH_FAIL = 'FETCH_FAIL';
export const FETCH_LOADING = 'FETCH_FAIL';
export const FILTER_PRODUCT = 'FILTER_PRODUCT';

    import api from '../../services/api';
    import {FETCH_SUCESS,FETCH_FAIL,FETCH_LOADING} from '../constants/fetchTypes';

    const fetchSucess = data => ({
        type: FETCH_SUCESS,
        payload: {
          ...data
        }
      });

      const fetchStarted = () => ({
        type: FETCH_LOADING
      });

      const fetchFailed = error => ({
        type: FETCH_FAIL,
        payload: {
          error
        }
      });

    export const fetchProduct = () => {
      console.log('action')
    return dispatch => {
      dispatch(fetchStarted());

      api
        .get('/products')
        .then(res => {
          dispatch(fetchSucess(res.data));
        })
        .catch(err => {
          dispatch(fetchFailed(err.message));
        });
    };
  };

import {
    FETCH_SUCESS,
    FETCH_FAIL,
    FETCH_LOADING,
  } from '../constants/fetchTypes';

  const initialState = {
    loading: false,
    data: [],
    error: null
  };

  export default function productReducer(state = initialState, action) {
    switch (action.type) {
      case FETCH_LOADING:
        return {
          ...state,
          loading: true
        };
      case FETCH_SUCESS:
        return {
          ...state,
          loading: false,
          error: null,
          data: [...state.data, action.payload]
        };
      case FETCH_FAIL:
        return {
          ...state,
          loading: false,
          error: action.payload.error
        };
      default:
        return state;
    }
  }

import { combineReducers } from 'redux'
import  productReducer from './productsFetch.reducer';

export default combineReducers({

});

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

export default function configureStore(initialState) {
    return createStore(
        rootReducer,
        initialState,
        applyMiddleware(thunk)
    );
}
我的减速机：

export const FETCH_SUCESS = 'FETCH_SUCESS';
export const FETCH_FAIL = 'FETCH_FAIL';
export const FETCH_LOADING = 'FETCH_FAIL';
export const FILTER_PRODUCT = 'FILTER_PRODUCT';

    import api from '../../services/api';
    import {FETCH_SUCESS,FETCH_FAIL,FETCH_LOADING} from '../constants/fetchTypes';

    const fetchSucess = data => ({
        type: FETCH_SUCESS,
        payload: {
          ...data
        }
      });

      const fetchStarted = () => ({
        type: FETCH_LOADING
      });

      const fetchFailed = error => ({
        type: FETCH_FAIL,
        payload: {
          error
        }
      });

    export const fetchProduct = () => {
      console.log('action')
    return dispatch => {
      dispatch(fetchStarted());

      api
        .get('/products')
        .then(res => {
          dispatch(fetchSucess(res.data));
        })
        .catch(err => {
          dispatch(fetchFailed(err.message));
        });
    };
  };

import {
    FETCH_SUCESS,
    FETCH_FAIL,
    FETCH_LOADING,
  } from '../constants/fetchTypes';

  const initialState = {
    loading: false,
    data: [],
    error: null
  };

  export default function productReducer(state = initialState, action) {
    switch (action.type) {
      case FETCH_LOADING:
        return {
          ...state,
          loading: true
        };
      case FETCH_SUCESS:
        return {
          ...state,
          loading: false,
          error: null,
          data: [...state.data, action.payload]
        };
      case FETCH_FAIL:
        return {
          ...state,
          loading: false,
          error: action.payload.error
        };
      default:
        return state;
    }
  }

import { combineReducers } from 'redux'
import  productReducer from './productsFetch.reducer';

export default combineReducers({

});

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

export default function configureStore(initialState) {
    return createStore(
        rootReducer,
        initialState,
        applyMiddleware(thunk)
    );
}
我的组合器：

export const FETCH_SUCESS = 'FETCH_SUCESS';
export const FETCH_FAIL = 'FETCH_FAIL';
export const FETCH_LOADING = 'FETCH_FAIL';
export const FILTER_PRODUCT = 'FILTER_PRODUCT';

    import api from '../../services/api';
    import {FETCH_SUCESS,FETCH_FAIL,FETCH_LOADING} from '../constants/fetchTypes';

    const fetchSucess = data => ({
        type: FETCH_SUCESS,
        payload: {
          ...data
        }
      });

      const fetchStarted = () => ({
        type: FETCH_LOADING
      });

      const fetchFailed = error => ({
        type: FETCH_FAIL,
        payload: {
          error
        }
      });

    export const fetchProduct = () => {
      console.log('action')
    return dispatch => {
      dispatch(fetchStarted());

      api
        .get('/products')
        .then(res => {
          dispatch(fetchSucess(res.data));
        })
        .catch(err => {
          dispatch(fetchFailed(err.message));
        });
    };
  };

import {
    FETCH_SUCESS,
    FETCH_FAIL,
    FETCH_LOADING,
  } from '../constants/fetchTypes';

  const initialState = {
    loading: false,
    data: [],
    error: null
  };

  export default function productReducer(state = initialState, action) {
    switch (action.type) {
      case FETCH_LOADING:
        return {
          ...state,
          loading: true
        };
      case FETCH_SUCESS:
        return {
          ...state,
          loading: false,
          error: null,
          data: [...state.data, action.payload]
        };
      case FETCH_FAIL:
        return {
          ...state,
          loading: false,
          error: action.payload.error
        };
      default:
        return state;
    }
  }

import { combineReducers } from 'redux'
import  productReducer from './productsFetch.reducer';

export default combineReducers({

});

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

export default function configureStore(initialState) {
    return createStore(
        rootReducer,
        initialState,
        applyMiddleware(thunk)
    );
}
我的店铺：

export const FETCH_SUCESS = 'FETCH_SUCESS';
export const FETCH_FAIL = 'FETCH_FAIL';
export const FETCH_LOADING = 'FETCH_FAIL';
export const FILTER_PRODUCT = 'FILTER_PRODUCT';

    import api from '../../services/api';
    import {FETCH_SUCESS,FETCH_FAIL,FETCH_LOADING} from '../constants/fetchTypes';

    const fetchSucess = data => ({
        type: FETCH_SUCESS,
        payload: {
          ...data
        }
      });

      const fetchStarted = () => ({
        type: FETCH_LOADING
      });

      const fetchFailed = error => ({
        type: FETCH_FAIL,
        payload: {
          error
        }
      });

    export const fetchProduct = () => {
      console.log('action')
    return dispatch => {
      dispatch(fetchStarted());

      api
        .get('/products')
        .then(res => {
          dispatch(fetchSucess(res.data));
        })
        .catch(err => {
          dispatch(fetchFailed(err.message));
        });
    };
  };

import {
    FETCH_SUCESS,
    FETCH_FAIL,
    FETCH_LOADING,
  } from '../constants/fetchTypes';

  const initialState = {
    loading: false,
    data: [],
    error: null
  };

  export default function productReducer(state = initialState, action) {
    switch (action.type) {
      case FETCH_LOADING:
        return {
          ...state,
          loading: true
        };
      case FETCH_SUCESS:
        return {
          ...state,
          loading: false,
          error: null,
          data: [...state.data, action.payload]
        };
      case FETCH_FAIL:
        return {
          ...state,
          loading: false,
          error: action.payload.error
        };
      default:
        return state;
    }
  }

import { combineReducers } from 'redux'
import  productReducer from './productsFetch.reducer';

export default combineReducers({

});

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

export default function configureStore(initialState) {
    return createStore(
        rootReducer,
        initialState,
        applyMiddleware(thunk)
    );
}
我的家.js

class HomeProducts extends Component {

    componentDidMount() {
        this.props.fetchData();
      }
    render() {
      const productItems = this.props.products.map( product => (
          <div className="col-md-4 pt-4 pl-2">
          <div className = "thumbnail text-center"> 
          <a href={`#${product.id}`}  onClick={(e)=>this.props.handleAddToCard(e,product)}>
              <p>
                  {product.name}
              </p>
          </a>
          </div>
              <b>{util.formatCurrency(product.price)}</b>
              <button className="btn btn-primary" onClick={(e)=>this.props.handleAddToCard(e,product)}>Add to Cart</button>
          </div>
      )
      )
        return (
            <div className="container">
            <div className="row">
                {productItems}
            </div>  
            </div>
        )
    }
}
const mapStateToProps = (state) => {
        console.log(state);
  };
  const mapDispatchToProps = (dispatch) => {
    return {
        fetchData: () => dispatch(fetchProduct())
    };
  };
export default connect(mapStateToProps, mapDispatchToProps)(HomeProducts);

class HomeProducts扩展组件{
componentDidMount（）{
this.props.fetchData（）；
}
render（）{
const productItems=this.props.products.map（product=>(
{util.formatCurrency（product.price）}
this.props.HandLeadToCard（e，产品）}>添加到购物车
)
)
返回(
{productItems}
)
}
}
常量mapStateToProps=（状态）=>{
console.log（状态）；
};
const mapDispatchToProps=（调度）=>{
返回{
fetchData:（）=>dispatch（fetchProduct（））
};
};
导出默认连接（mapStateToProps、mapDispatchToProps）（家用产品）；
我怀疑我的合路器用什么

要获取日期和错误，请查看我的加载方式、数据和错误

我不知道如何在meu combine
redux中实现它


我也不知道我的
操作
和我的
reducer
在您的组合器文件中是否有最佳实践，只需将您的reducer添加为键值对，如下所示：


import thunkInject from 'redux-thunk-inject';

const mockStore = configureMockStore([thunkInject()]);
const store = mockStore(mockStore);
const wrapper = mount(<Provider store={store} />);
expect(wrapper).toMatchSnapshot();



import { combineReducers } from 'redux'
import  productReducer from './productsFetch.reducer';
// import anotherReducer from './yourPath';

export default combineReducers({
    products: productReducer,
 // anotherState: anotherReducer
});


理想情况下，您应该导入您的操作，并通过您的connect方法将其传递给组件，这样您就可以作为道具从组件访问它


import fetchProduct from './pathToYourActionFile';

const mapStateToProps = (state) => {
    console.log(state);
};

const mapActionsToProps = {
    fetchProduct: fetchProduct
};

export default connect(mapStateToProps, mapActionsToProps)(HomeProducts);



是否初始化了基本存储？如果是,，您只需添加导入到组合器文件中的
productReducer
，作为传递到
combineReducer
函数的对象中的键即可。@Sultan H.是的，我开始存储我用我的存储编辑我不太明白哦，谢谢兄弟，出于某种原因没有调用我的操作。您能看到我哪里出错了吗？您的意思是
this.props.fetchData
？是的，出于某种原因，我的状态是nullproductReducer:{加载：false，数据：数组（0），错误：null}甚至我的api工作正常，但它不在我的操作中共享
fetchProduct（）
的代码。如果您使用的是
redux-thunk