Я не могу добавлять товары в корзину в приложении для покупок, используя избыточную реакцию - PullRequest
Новая
       15

Я не могу добавлять товары в корзину в приложении для покупок, используя избыточную реакцию

0 голосов
/ 04 марта 2020

Я пытаюсь создать простое приложение для шоппинга, в своем проекте я использую избыточную и реактивную навигацию.

Имеется экран Home, экран Books и экран Cart.

Я импортировал элементы через простой массив с именем books на экран Books

Это коды на экране Books: 


import { useDispatch} from 'react-redux';
import { addSomething} from '../actions';
import { books } from '../data/fakedata';




const Books = (props) => {

  const { navigation } = props;
  const dispatch = useDispatch();


const bookProduct=(books)=>{

return books.map((item, index)=>{

return(
  <TouchableOpacity 
  key={index}
  onPress={()=>dispatch(addSomething(books))}
  >
<Text style={{color:'white'}}>{item.name}- {item.price}</Text>
  </TouchableOpacity>

)})}


return (
      <View >
              {bookProduct(books)}
      </View> )}

Это файл action: 

export const addSomething = (books) => {

    return (dispatch) => {

        dispatch({
            type: 'ADD',
            payload: books
        })

    }


}
export const removeSomething = (books) => {

    return (dispatch) => {

        dispatch({
            type: 'REMOVE',
            payload: books
        })

    }


}

Это компонент Header на экране Books, который содержит состояние и будет обновляться после каждого щелкните по элементам: 


import {useSelector} from 'react-redux';


const Header =(props)=>{

 const {navigation }=props;
 const counter=useSelector(state=>state.cardR.counter);

return(
<Fragment>


<Icon onPress={()=>navigation.navigate('Cart')}  />

<Text>{counter}</Text>

</Fragment>
)}

Это reducer файл: 


const initialState={
counter:0,
item:''

}

export default (state=initialState, action)=>{

switch (action.type) {
    case 'ADD':
        return {counter:state.counter+1,item:action.payload}
        break;
    case 'REMOVE':

         return something else

        break;

    default:
        return state;
}}

Это Combinereducer файл: : 


import {combineReducers} from 'redux';
import cartReducer from './cartReducer';
import visibleReducer from './visibleReducer';


export default combineReducers({

cartR:cartReducer,
visibleR:visibleReducer 


})

И это файл store: 


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

const initialState={

    cardR:{counter:0, object:''},
    visibleR:{visible:false}

}


export const store = createStore(reducers, initialState, applyMiddleware(thunk) );

Моя проблема:

Я могу обновить состояние {counter} в заголовке, когда пользователь щелкает элемент на экране Books`` screen but i need to add items into cart`` одновременно с этим щелчком, но этого не происходит

Буду признателен, если Вы помогаете мне решить это

1 Ответ

0 голосов
/ 04 марта 2020 
//item, not books
onPress={()=>dispatch(addSomething(item))}

Также вы можете удалить initialState из 

export const store = createStore(reducers, initialState, applyMiddleware(thunk) );

Потому что вы устанавливаете initialState для каждого редуктора напрямую

Обновленный код для reducer файла 

const initialState={
counter:0,
items: [],

}

export default (state=initialState, action)=>{

switch (action.type) {
    case 'ADD':
        return {counter:state.counter+1, items: [...state.items, action.payload.item]}}
        break;
    case 'REMOVE':

         return something else

        break;

    default:
        return state;
}}
...