return Object.keys(this.props.posts).map(postId => {
const currentPost = this.props.posts[postId]
return (
<li className="list-group-item" key={currentPost.id}>
<span className="pull-xs-right">{currentPost.categories}</span>
<strong>{currentPost.title}</strong>
</li>
);
})...
import configRoutes from '../../routes'
...
render() {
return (
<Provider store={store}>
<Router history={routerHistory}>
{configRoutes(store)}
</Router>
</Provider>
)
}...
<Route path='/secret-area' component={SecretAreaContainer} onEnter={_ensureAuthenticated}>
...export default function configRoutes(store) {
function _ensureAuthenticated(nextState, replace, callback) {
const { dispatch } = store
const { session } = store.getState()
const { currentUser } = session // данные по юзеру
let nextUrl
if (!currentUser && localStorage.getItem('token')) {
dispatch(getCurrentAccount())
}
} else if (!localStorage.getItem('token')) {
nextUrl = location.pathname + location.search.replace('?', '&')
replace('/signin')
}
callback()
}
// здесь ваши роутыexport function signIn(email, password) {
return (dispatch, getState) => {
dispatch({
type: USER_SIGN_IN_REQUEST,
})
const params = {
email,
password,
}
httpPost(`${API_ROOT_V1}/api/authenticate`, params)
.then((data) => {
saveParamsToLS(data) // здесь токен можно сохранить, например
dispatch(push('/account')) // ваш РЕДИРЕКТ, используется push из react-router-redux (что необязательно)
})
.catch((error) => {
console.warn(`Sign in error: ${JSON.stringify(error)}`) //eslint-disable-line no-console
dispatch({
type: USER_SIGN_IN_FAILURE,
error: error,
})
})
}
}function createThunkMiddleware(extraArgument) {
return ({ dispatch, getState }) => next => action => {
if (typeof action === 'function') {
return action(dispatch, getState, extraArgument);
}
return next(action);
};
}
Некоторое время работал с React и Redux, скажу честно, довольно прикольная вещь, но вот каких то огромных плюсов в использовании Redux я не увидел.
// для примера обе переменные (store и dispatch) объявлены в той же области видимости
// на самом деле их нет в вашем файле компонента
// Так как функция connect вызывается "где-то там, где они доступны"
// вы имеете к ним доступ
let dispatch = () => console.log("dispatch")
let store = { user: { name: 'Mike', age: 15 }, data: [1,2,3] }
function connect(mapStateToProps, mapDispatchToProps) {
console.log(mapStateToProps(store))
}
function mapStateToProps(storeFromClosure) { // здесь оказывается глобальный store доступный из замыкания
return {
myData: storeFromClosure.data
}
}
connect(mapStateToProps, null)<Select
name="form-field-name"
value="one"
options={options}
onChange={this.setUser} // тот самый onChange
/>// текущий компонент
setUser(e) { this.props.setUser(e.target.value) }
// родитель
setUser(id) { this.props.actions.setUser(id) } // вызов redux action-creatorне включая основы js
let obj1 { name: 'Test', age: 100 }
let obj2 = obj1
obj2.name = 'Test_new'Есть меню(не навигация, а просто набор плюшек, к примеру добавить заметку) и сама область где отображается эта заметка.
...
<HeaderContainer /> // (или тупой <Header />)
{ this.props.children }
......
<Route path='/add' component={AddContainer} />
<Route path='/edit/:id' component={EditContainer} />
...connect(mapStateToProps,mapDispatchToProps)(имя_компонента)dispatch(push('/newUrl'))И еще. думаю вынести все данные(пункты меню к примеру) в отдельный файл(этакий недосервер)
Где с ним лучше общаться? использую react-redux
Да и мне примеры вовсе не нужны. хочу для начала своих шишек набить.
НО точно не хочу пару месяцев пилить проект(бесконечно усложняющаяся toDo) а потом понять что привык делать так как не надо.
$.ajax(url...
success(data) { dispatch({type: AUTH_SUCCESS, data }) })$.ajax(url...
success(data) {
dispatch({type: AUTH_SUCCESS, data })
loadUserCart(data.user_id) // <- еще один action creator
})function loadUserCart(id) {
return (dispatch) => {
dispatch({ type: CART_REQUEST }) // получается, это событие вызовется сразу после успешной авторизации, практически мгновенно
$.ajax(urlForCartUpdate...
success(data) {
dispatch({type: CART_SUCCESS, data })
})
}
}нужно сначала сделать AJAX-запрос, а по его результатам уже рендерить корзину
В компонентах-контроллерах есть только функция connect() со своими функциями-аргументами, которые передают данные в представление. Как-то реагировать на изменения состояния такие компоненты не умеют (я ведь не ошибаюсь в этом?).
{
ваше_название_поля: reduxStore.название_редьюсера
}function mapStateToProps(state) {
return {
rate: state.rate,
}
}// кусочек из reducer'a
case GET_DETAILED_FILES_REQUEST:
return {
...state,
isFetching: true,
}
...
// код из теста
it('GET_DETAILED_FILES_REQUEST', () => {
const action = {
type: GET_DETAILED_FILES_REQUEST,
}
const nextState = reducer(initialState, action) // где reducer = ваш настоящий редьюсер, например " import reducer from '../../src/reducers/detailedFiles' "
expect(nextState).to.deep.equal({
...initialState,
isFetching: true,
})
})я храню меняющуюся информацию в state именно этого компонента
стоит ли эти текущие state объявить в state всего приложения и менять их там
connect( (state)=> {
console.log('вызван connect')
return state.arrayValues.filter(val => val.includes(a));//массив со строками
},
(dipatch)=>({})
);<Route path={"/rooms/:chatroomId"} component={ChatBox} />