module.exports = {
plugins: [
new webpack.DefinePlugin({
__API_URL__: JSON.stringify(process.env.API_URL),
});
],
};const Example = () => (
<div className="form-control">
<input type="text" name="email" value={email} onChange={handleChange} />
{isEmailInUse && (
<div className="error">
Email address is in use, please select another or <Link to='/signin'>Sign in</Link>
</div>
)}
</div>
);что делать в этом случае?
В чем причина?
const mapDispatchToProps = dispatch => ({
getMovies: () => dispatch(getMoviesAction()),
getRecommendations: () => dispatch(getRecommendationsAction()),
});const mapDispatchToProps = {
getMovies: getMoviesAction,
getRecommendations: getRecommendationsAction,
};getMoviesAction ==> getMovies
getMovies ==> getMoviesSucceededconst mapDispatchToProps = {
getMovies,
getRecommendations,
};render () {
const { projects } = this.props;
const activeProjects = projects.filter(project => project.ProjectStatus === "ACTIVE");
const projectsList = activeProjects.map(project => (
<div key={i} className="focus-projects">
...
</div>
));
return (
...
);
}this.setState({
activeProjects: this.props.projects.filter(project.ProjectStatus === "ACTIVE"),
});const Foo = ({ dispatch }) => {
const handler = useCallback(() => {
dispatch(action());
}, []);
return (
<Bar onClick={handler} />
);
};
export default connect()(Foo);const Foo = () => {
const dispatch = useDispatch();
const handler = useCallback(() => {
dispatch(action());
}, []);
return (
<Bar onClick={handler} />
);
};
export default Foo;const Foo = ({ value }) => {
return (
<Bar value={value} />
);
};
const mapStateToProps = state => ({
value: state.value,
});
export default connect(mapStateToProps)(Foo);const Foo = () => {
const value = useSelector(state => state.value);
return (
<Bar value={value} />
);
};
export default Foo;const valueSelector = state => state.value;
const Foo = () => {
const { dispatch, getState, subscribe } = useStore();
const value = valueSelector(getState());
useEffect(() => subscribe(console.log), []);
const handler = useCallback(() => {
dispatch(action());
}, []);
return (
<Bar onClick={handler} value={value} />
);
};
export default Foo;createIsOptionDisabled = disOptions => option =>
disOptions.some(({ value }) => value === option.value);return (
<Select
options={options}
isOptionDisabled={this.createIsOptionDisabled(disOptions)}
/>
);import React, { useCallback, useRef } from 'react';
import ReactDOM from 'react-dom';
import { combineReducers, createStore } from 'redux';
import { Provider, connect } from 'react-redux';
// action type
const ADD_MESSAGE = 'ADD_MESSAGE';
// action creator
const addMessage = payload => ({
type: ADD_MESSAGE,
payload,
});
// reducer
const messages = (state = [], action) => {
switch (action.type) {
case ADD_MESSAGE:
return [...state, action.payload];
default:
return state;
}
};
// root reducer
const rootReducer = combineReducers({
messages,
});
// store
const store = createStore(rootReducer);
const App = ({ addMessage, messages }) => {
const inputRef = useRef(null);
const handler = useCallback(() => {
addMessage(inputRef.current.value);
inputRef.current.value = '';
}, [inputRef, addMessage]);
return (
<div>
<ul>
{messages.map((message, i) => (
<li key={i}>{message}</li>
))}
</ul>
<input ref={inputRef} />
<button onClick={handler}>Add Message</button>
</div>
);
};
const mapStateToProps = state => ({
messages: state.messages,
});
const mapDispatchToProps = {
addMessage,
};
const ConnectedApp = connect(
mapStateToProps,
mapDispatchToProps
)(App);
const root = (
<Provider store={store}>
<ConnectedApp />
</Provider>
);
const rootElement = document.getElementById('root');
ReactDOM.render(root, rootElement);import React, { useCallback, useRef } from 'react';
import ReactDOM from 'react-dom';
import { combineReducers, createStore } from 'redux';
import { Provider, connect } from 'react-redux';
import { createAction, createReducer } from 'redux-act';
// action creator
const addMessage = createAction('ADD_MESSAGE');
// reducer
const messages = createReducer({}, []);
messages.on(addMessage, (state, message) => [...state, message]);
// root reducer
const rootReducer = combineReducers({
messages,
});
// store
const store = createStore(rootReducer);
const App = ({ addMessage, messages }) => {
const inputRef = useRef(null);
const handler = useCallback(() => {
addMessage(inputRef.current.value);
inputRef.current.value = '';
}, [inputRef, addMessage]);
return (
<div>
<ul>
{messages.map((message, i) => (
<li key={i}>{message}</li>
))}
</ul>
<input ref={inputRef} />
<button onClick={handler}>Add Message</button>
</div>
);
};
const mapStateToProps = state => ({
messages: state.messages,
});
const mapDispatchToProps = {
addMessage,
};
const ConnectedApp = connect(
mapStateToProps,
mapDispatchToProps,
)(App);
const root = (
<Provider store={store}>
<ConnectedApp />
</Provider>
);
const rootElement = document.getElementById('root');
ReactDOM.render(root, rootElement);Или лучше так
const recommendation = recommendations.find(({ movieId }) => movieId === movie.id);так как вк ведь тоже на react-е
но при этом в local storage нет токенов
нет данных пользователя
Где хранить данные полученные от сервера после авторизации
Как разрешить указывать уникальный url для страницы профиля
Что бы хотел получить в ответ на вопросы:
1) Правильно ли у меня сейчас сделано.
2) Если не правильно, то как сделать правильно.
3) Литературу, которая бы помогла приблизиться к вк по реализации этого вопроса.
4) Так же очень сильно хотелось бы узнать, где можно найти литературу, которая бы помогла сделать приложение максимально безопасным.
https://site.net/?name=<script>alert(document.cookie)</script>