Как я могу динамически использовать useReducer (или другую альтернативу), чтобы предотвратить написание нескольких повторяющихся строк кода? - PullRequest
Новая
       10

Как я могу динамически использовать useReducer (или другую альтернативу), чтобы предотвратить написание нескольких повторяющихся строк кода?

1 голос
/ 06 апреля 2020

Я пишу программу, чтобы бизнес мог показывать свои услуги, а также устанавливать цены на каждую в соответствии с размером товара. В компоненте «Опции» я использую useReducer (где, как мне кажется, мне придется создавать сотни «дел» внутри useReducer, названного в честь каждой службы). В компоненте «Сервис» я использую форму Formik, чтобы иметь возможность сохранять значения, передаваемые каждому «Сервису».

Это компонент «Параметры», с помощью userReducer для установки цен. Перебирает список сотен сервисов для отображения сотен компонентов «Сервис» 

const reducer = (state, action) => {
    switch (action.type) {
      case 'SET_SMALL_PRICE': //do I have to create hundreds of these with different ids for each?
        return {
          ...state,
          smallPrice: action.payload,
        }
      default:
        return state
    }
  }

//really long list that will be looped over
serviceList.map(item => ( 

//do I have to pass hundreds of values here, 
//one for each of the hundreds of 'Service'?
  <Context.Provider value={{ smallPrice, bigPrice }}> 
    <Service
       key={service.id}
       id={service.id}
       name={service.name}
    />)
  <Context.Provider />

«Сервис». Их будет сотни, и для каждого из них необходимо установить цены отдельно (smallPrice, smallPrice2, smallPrice3 ...?) 

//In case I would pass down hundreds of items through context 
//in the other component, I thought of passing each an ID 
//and then destructure these conditionally 
//like `smallPrice${props.id}`. Doesn't work unfortunately.               
const { smallPrice } = useContext(Context) 

<Formik
   initialValues={{

//gets this value through Context. also would have 
//to have ids added conditionally (through props, perhaps)
     smallPrice: smallPrice, //smallPrice1, smallPrice2 ?
   }}
   onSubmit={(values, { setSubmitting }) => {

//e.g SET_SMALL_PRICE_3 perhaps?
       dispatch({ type: 'SET_SMALL_PRICE', payload: values.smallPrice,}) 
            setTimeout(() => {
              setSubmitting(false)
            }, 400)
   }}>
       <Form>

//also change the name here so that it won't affect a different service
         <Field name="smallPrice" type="text" />
       </Form>
<Formik/>
...