Sử dụng Biểu mẫu Redux với Bộ định tuyến Phản ứng

Question

Tôi đã quay bánh xe của mình một lúc rồi cố gắng tìm ra cách tốt nhất để làm tất cả những điều này. Đây là tình huống của tôi:

Tôi đang sử dụng kết hợp Bộ định tuyến phản hồi và Biểu mẫu Redux để tạo trang đăng nhập/tạo tài khoản.

export default (
    <Route path='/' component={App}> 
    <IndexRoute component={Signup} /> 
    <Route path='signup_verify' component={SignupVerify} /> 
    </Route>  
); 

Khi bạn tải các trang web của nó cho thấy các lĩnh vực để tạo một tài khoản

tôi sử dụng Phản ứng Form để xác nhận các lĩnh vực và một khi tất cả mọi thứ là ok tôi làm

onSubmit() { 
    this.context.router.push('/signup_verify') 
} 

do đó đẩy chúng đến trang tiếp theo và cuối cùng của trình hướng dẫn. Trong trang thứ hai này, tôi có một đầu vào bị vô hiệu hóa mà tôi muốn điền vào với tên mà họ đã cung cấp cho tôi trong biểu mẫu trước. Làm cách nào để tôi nhận được tên người dùng đã gửi xuất hiện trong trang thứ hai này?

Phản ứng cuộc đàm phán Mẫu về việc sử dụng trang trí:

@reduxForm({ 
    form: 'myForm' 
}) 

http://redux-form.com/5.2.4/#/api/get-values?_k=eo04uv

https://github.com/erikras/redux-form/issues/260#issuecomment-155852315

tôi thiết lập môi trường của tôi để có thể sử dụng trang trí nhưng khi tôi cố gắng thực hiện cùng mã một một vài dòng ở trên, tôi có lỗi:

Warning.js: 45Cảnh báo: Không thành công propTyp e: Giá đỡ không hợp lệ fields loại object được cung cấp cho ReduxForm(Signup), dự kiến ​​là một mảng. Kiểm tra render phương pháp Connect(ReduxForm(Signup)) .warning @ warning.js: 45 getValues.js: 59

và

của router Lỗi Loại: fields.reduce không phải là một chức năng

trang đầu tiên của tôi, nơi mà các ảnh chụp màn hình đến từ, trông rất giống với WizardFormFirstPage.js (http://redux-form.com/5.2.4/#/examples/wizard?_k=y8mg56). Làm thế nào WizardFormSecondPage hiển thị dữ liệu từ WizardFormFirstPage trong một đầu vào bị vô hiệu hóa?

Tôi biết điều đó rất nhiều, mọi trợ giúp đều được đánh giá cao! Ngoài ra, bất kỳ phản hồi nào về cách thực hiện điều này theo cách khác sẽ thật tuyệt vời hoặc thích hợp với cách tiếp cận hiện tại của tôi.

Answer 1

Sau một vài giao diện điều khiển các bản ghi tôi phát hiện ra rằng giá trị đầu vào từ trang đầu tiên sẽ tồn tại đến trang tiếp theo NẾU:

1) Xuất tất cả các lĩnh vực của bạn trên trang đầu tiên, hoặc ít nhất là một trong những bạn muốn truy cập. IE:

trường const xuất khẩu = ['name', 'email', 'company'];

2) Chỉ định destroyOnUnmount: cờ giả để lưu giữ dữ liệu biểu mẫu trên các thành phần mẫu unmounts.

3) Kéo nó ra khỏi đạo cụ trong trang tiếp theo của bạn từ trình hướng dẫn. IE: const {fields: {name}, handleSubmit} = this.đạo cụ;

Sau đó, bạn sẽ có quyền truy cập vào nó dưới thing.value. IE:

name.value sẽ bằng bất kỳ thứ gì tôi đưa vào đầu vào tên trên trang đầu tiên.

Documents để biết thêm: http://redux-form.com/5.2.4/#/examples/wizard?_k=y8mg56

Answer 2

Đặt tùy chọn destroyOnUnmount: false trong reduxForm() trang trí của bạn.

Thứ hai, bạn có thể nên sử dụng gói react-redux. Nó có một chức năng gọi là connect() cho phép bạn vượt qua trạng thái để đạo cụ.

const mapStateToProps = (state) => { 
    return { 
    name: state.form.myForm.name, 
    email: state.form.myForm.email, 
    company: state.form.myForm.company 
    } 
}; 

const SignupVerify = connect(mapStateToProps)(SignupVerify) 

Thay thế SignupVerify bằng tên thành phần của bạn.

state.form.myForm sẽ thay đổi tùy thuộc vào những gì thuộc tính bạn đã nhập cho reduxForm()

Redux usage with React

Redux-Form wizard example