Reduxのstoreの値を更新して値を変更したい(Reduxを使い値の更新を行いたいです)

前提・実現したいこと

Reduxを使い値の更新を行いたいです。

よくあるお問い合わせページの確認動作なのですが

入力フォーム画面で入力された値を(確認画面へのボタンを押した先の)
確認ページフォームのvalueに渡したいです

該当のソースコード

Contact.jsx

javascript
1const Contact = () => {
2
3  const dispatch = useDispatch();
4  const selector = useSelector( (state) => state )
5
6  const [firstName,setFirstName] = useState(""),
7        [lastName,setLastName] = useState(""),
8        [company,setCompany] = useState(""),
9        [division,setDivision] = useState(""),
10        [email,setEmail] = useState(""),
11        [phoneNumber,setPhoneNumber] = useState(""),
12        [question,setQuestion] = useState("");
13
14  const inputFirstName = useCallback( (event) => {
15        setFirstName(event.target.value)
16        },[setFirstName]),
17        inputLastName =  useCallback( (event) => {
18        setLastName(event.target.value)
19        },[setLastName]),
20        inputCompany =  useCallback( (event) => {
21        setCompany(event.target.value)
22        },[setCompany]),
23        inputDivision =  useCallback( (event) => {
24        setDivision(event.target.value)
25        },[setDivision]),
26        inputEmail =  useCallback( (event) => {
27        setEmail(event.target.value)
28        },[setEmail]),
29        inputPhonenumeber =  useCallback( (event) => {
30        setPhoneNumber(event.target.value)
31        },[setPhoneNumber]),
32        inputQuestion =  useCallback( (event) => {
33        setQuestion(event.target.value)
34        },[setQuestion]);
35
36  return(
37    <div className="content">
38      <section className="profile-content-wrapper">
39        <h2 className="font-philo">CONTACT</h2>
40        <ConfirmStep/>
41        <div className="formbox">
42        <form>
43          <div className="form__input">
44            <p>お名前<span>*</span></p>
45              <div className="input-name">
46                <TextInput placeholder={"姓"} rows={1} value={firstName} onChange={inputFirstName}/>
47                <span></span>
48                <TextInput placeholder={"名"} rows={1} value={lastName} onChange={inputLastName}/>
49              </div>
50          </div>
51          <div className="form__input">
52            <p>会社名<span>*</span></p>
53            <TextInput placeholder={"会社名"} rows={1} value={company} onChange={inputCompany}/>
54          </div>
55          <div className="form__input">
56            <p>部署名</p>
57            <TextInput rows={1} value={division} onChange={inputDivision}/>
58          </div>
59          <div className="form__input">
60            <p>メールアドレス<span>*</span></p>
61            <TextInput placeholder={"xxx@example.co.jp"} rows={1} value={email} onChange={inputEmail}/>
62          </div>
63          <div className="form__input">
64            <p>電話番号<span>*</span></p>
65            <TextInput placeholder={"000-0000-0000"} rows={1} value={phoneNumber} onChange={inputPhonenumeber}/>
66          </div>
67          <div className="form__input">
68            <p>お問い合わせ内容<span>*</span></p>
69            <TextInput placeholder={"お問い合わせ内容を入力してください"} rows={9} value={question} onChange={inputQuestion}/>
70          </div>
71        </form>
72        </div>
73        <Button onClick={() => dispatch( saveContactInfo(firstName, lastName, company, division, email, phoneNumber, question))}>確認画面へ</Button>
74

initialState.js

javascript
1const contactInitialState = {
2    form: {
3      firstName: "",
4      lastName: "",
5      company: "",
6      division: "",
7      email: "",
8      phoneNumber: "",
9      question: ""
10  }
11};

action.js

javascript
1export const CONTACT_INPUT = "CONTACT_INPUT";
2
3export const contactInputs = (useState) => {
4  return {
5    type: "CONTACT_INPUT",
6    payload: {
7      firstName: useState.setFirstName,
8      lastName: useState.setLastName,
9      company: useState.setCompany,
10      division: useState.setDivision,
11      email: useState.setEmail,
12      phoneNumber: useState.setPhoneNumber,
13      question: useState.setQuestion
14    }
15  }
16};
17

operation.js

javascript
1export const saveContactInfo = (firstName, lastName, company, division, email, phoneNumber, question) => {
2  return async (dispatch) => {
3
4    const data = {
5      firstName: firstName,
6      lastName: lastName,
7      company: company,
8      division: division,
9      email: email,
10      phoneNumber: phoneNumber,
11      question: question
12    }
13
14    if(firstName === "" || lastName === "" || company === "" || email === "" || phoneNumber === "" || question === ""){
15      alert("必須項目が未入力です")
16      return false
17    }
18
19    console.log(firstName, lastName, company, division, email, phoneNumber, question);
20
21    dispatch(push("/contactPages/confirm"))
22  }
23};
24

reducers.js

javascript
1export const ContactReducer = ( state = contactInitialState.form, action ) => {
2  switch(action.type){
3    case Actions.CONTACT_INPUT:
4      return {
5        ...state,
6        ...action.payload
7      }
8      default: return state
9  }
10};

Store.js

javascript
1export default function createStore(history) {
2  return reduxCreateStore(
3    combineReducers({
4      router: connectRouter(history),
5      form: ContactReducer,
6    }),
7    applyMiddleware(
8      routerMiddleware(history),
9      thunk
10    )
11  );
12}