react.js - react-redux服务端渲染的问题

问题描述

问 题

先贴一下测试代码

1,服务端

//store
                let store = createStore(todoApp);

                function mapStateToProps(state) {
                    return {
                        name: state.todos[0].name
                    };
                }

                function mapDispatchToProps(dispatch) {
                    store.getState();
                    return {
                        handleClick: () => dispatch({
                            type: ADD_TODO
                        })
                    };
                }

                //初始化数据
                store.dispatch({
                    type: 'ADD_TODO', name: 'jackple'
                });
                //connect把state和dispatch转换成props传递给子组件
                let App = connect(mapStateToProps, mapDispatchToProps)(Test);
                data.reactHtml = ReactDOMServer.renderToString(
                    <Provider store={store}>
                        <App />
                    </Provider>
                );
                //从store中获得初始state
                data.initialState = JSON.stringify(store.getState());
                this.response.render(this.apiInfo.template, data);

2, 客户端

class Test extends React.Component {
    constructor(props) {
        super(props);
    }

    handleClick = e => {
        console.log(e);
    }

    render() {
        const {name, handleClick} = this.props;
        return <div onClick={handleClick}>
            Hello {name}
        </div>;
    }
}
;

if (isNode) {
    module.exports = Test;
} else {
    function mapStateToProps(state) {
        return {
            name: state.todos[0].name
        };
    }

    function mapDispatchToProps(dispatch) {
        store.getState();
        return {
            handleClick: () => dispatch({
                type: ADD_TODO
            })
        };
    }

    // //初始化数据
    // store.dispatch({
    //     type: 'ADD_TODO', name: 'jackple'
    // });
    //connect把state和dispatch转换成props传递给子组件
    let App = connect(mapStateToProps, mapDispatchToProps)(Test);
    //通过服务端注入的全局变量得到初始 state
    const initialState = window.__INITIAL_STATE__;
    //使用初始 state 创建 Redux store
    const store = createStore(todoApp, initialState);
    // store.dispatch({
    //     type: 'ADD_TODO', name: 'jackpleppp'
    // });
    ReactDOM.render(
        <Provider store={store}>
            <App />
        </Provider>,
        document.getElementById('test')
    );
}

这样写有问题吗?初学,不太懂
另外data-react-checksum正常情况下在客户端以同样数据渲染的时候会被删除吗?

解决方案

参考我的脚手架 https://github.com/hahoocn/re...，支持服务器端渲染。服务器端渲染，图片和css路径是问题

这篇关于react.js - react-redux服务端渲染的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！