MapStateToProps của React-redux connect() được gọi nhiều lần trên điều hướng bộ định tuyến phản ứng

Question

Tôi có bộ định tuyến đơn giản (bắt đầu bằng redux-router và chuyển sang react-router để loại bỏ biến).

<Router history={history}> 
    <Route component={Admin} path='/admin'> 
    <Route component={Pages} path='pages'/> 
    <Route component={Posts} path='posts'/> 
    </Route> 
</Router> 

Thành phần quản trị về cơ bản chỉ là {this.props.children} với một số điều hướng; nó không phải là thành phần ed connect.

Trang thành phần là một thành phần connect ed với mapStateToProps() như vậy:

function mapStateToProps (state) { 
    return { 
    pages: state.entities.pages 
    }; 
} 

bài viết thậm chí còn thú vị hơn:

function mapStateToProps (state) { 
    let posts = map(state.entities.posts, post => { 
    return { 
     ...post, 
     author: findWhere(state.entities.users, {_id: post.author}) 
    }; 
    } 

    return { 
    posts 
    }; 
} 

Và sau đó khi tôi tải trang hoặc chuyển qua lại giữa bài/trang các tuyến đường Tôi nhận được sau đây trong console.log của tôi().

// react-router navigate to /posts 

Admin render() 
posts: map state to props 
Posts render() 
posts: map state to props 
Posts render() 
posts: map state to props 

// react-router navigate to /pages 

Admin render() 
pages: map state to props 
Pages render() 
pages: map state to props 

Vì vậy, câu hỏi của tôi là: tại sao mapStateToProps được gọi nhiều lần vào những thay đổi tuyến đường?

Ngoài ra, tại sao hàm map đơn giản trong mapStateToProps làm cho nó được gọi là lần thứ ba trong vùng chứa Bài đăng?

Tôi đang sử dụng các phần tử cơ bản logger và crashReporter từ các tài liệu Redux và nó không báo cáo bất kỳ thay đổi trạng thái hoặc sự cố nào. Nếu trạng thái không thay đổi tại sao các thành phần lại hiển thị nhiều lần?

Answer 1

Reselect cho phép bạn tạo các hàm seloized selector cho xử lý trạng thái có nguồn gốc.

Redux's documentation giải thích bằng ví dụ về cách sử dụng. Readme của repo cũng có một ví dụ nhanh.

Answer 2

Trải nghiệm với react-redux, bạn không nên xử lý thuộc tính cửa hàng bên trong mapStateToProps vì connect uses shallow checking of bound store attributes to check for diff.

Để kiểm tra xem thành phần của bạn có cần được cập nhật hay không, react-redux gọi mapStateToProps và kiểm tra thuộc tính cấp đầu tiên của kết quả. Nếu một trong số họ thay đổi (=== kiểm tra bình đẳng), thành phần sẽ cập nhật với các đạo cụ mới. Trong trường hợp của bạn posts thay đổi (map chuyển đổi) mỗi khi mapStateToProps được gọi, vì vậy thành phần của bạn được cập nhật trên mọi thay đổi của cửa hàng!

giải pháp của bạn sẽ trở lại chỉ tham khảo trực tiếp các thuộc tính của cửa hàng của bạn:

function mapStateToProps (state) { 
    return { 
    posts: state.entities.posts, 
    users: state.entities.users 
    }; 
} 

Sau đó, trong thành phần của bạn, bạn có thể định nghĩa một hàm xử lý dữ liệu của bạn theo yêu cầu:

getPostsWithAuthor() { 
    const { posts, users } = this.props; 

    return map(posts, post => { 
    return { 
     ...post, 
     author: findWhere(users, {_id: post.author}) 
    }; 
    }); 
}