Question

我试图在React-Native / Redux上使用firebase我需要在每次用户登录或注销时发送动作。如何从根组件调度操作？

class App extends Component {
    componentWillMount() {
        firebase.auth().onAuthStateChanged((user) => {
            if (user) {
            // Dispatch Action here
            } else {
            // Disptach Action here
            }
        });
    }

    render() {
        const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));

        return (
            <Provider store={store}>
                <Router />
            </Provider>
        );
    }
}

export default App;

Answer 1

class App extends Component {
    constructor() {
        this.store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
    }

    componentWillMount() {
        firebase.auth().onAuthStateChanged((user) => {
            if (user) {
                this.store.dispatch(...);
            } else {
                this.store.dispatch(...);
            }
        });
    }

    render() {
        return (
            <Provider store={this.store}>
                <Router />
            </Provider>
        );
    }
}

export default App;

并且不要在render()函数内部产生任何副作用。它必须是纯粹的功能。

Answer 2

使用redux connect和mapDispatchToProps ...查找文档{{3}}。 Connect仍将与根组件一起使用。然后在您的componentWillMount中，您可以通过connect

引用传递给它的组件道具中的操作

Answer 3

我找到了解决这个问题的方法。不应该是最好的方式，但它有效。

将您在根组件（App.js）设置上的身份验证请求设置为true或false。（我在下面的例子中使用firebase身份验证）

完成后，将状态作为prop传递给Component（InitialSetUp.js），然后可以使用Redux设置状态。

在InitialSetUp上，你就像root一样，呈现应用程序本身。

您可以在下面找到示例。

App.js

...

const store = createStore(reducers, 
window.__REDUX_DEVTOOLS_EXTENSION__ && 
window.__REDUX_DEVTOOLS_EXTENSION__());

export default class App extends Component {
state = { loggedIn: null};

componentWillMount() {
firebase.initializeApp({
...YOUR SETUP
});

firebase.auth().onAuthStateChanged((user) => {
if (user) {
this.setState({ loggedIn: true});
} else {
this.setState({ loggedIn: false});
}
});
}

renderInitialView() {
return  <InitialSetUp loggedIn={this.state.loggedIn}/>
}

render() {
return (
<Provider store={store}>
<View style={styles.container}>
{this.renderInitialView()}
</View>
</Provider>
);
}
}

InitialSetup.js

...

class initialSetUp extends Component {

renderInitialView() {
this.props.setLogged(this.props.loggedIn);
return  <Navigation />
}

render() {
return (
<View style={styles.container}>
{this.renderInitialView()}
</View>
);
}
}

export default connect(null, actions)(initialSetUp);

祝你好运o /

根组件的React / Redux调度操作？

3 个答案: